Streaming live at 10am (PST)

Safari text blurs over background video


#1

Can anyone help find a solution for a scaled div containing text blurring over a background video? After toggling the site to preview please click on the Safari Blurry Text div. Here is the sharable link https://preview.webflow.com/preview/neueone?preview=19e16625782b197213b2c942979c0543


#2

There’s no video playing. And is it the first div or second?


#3

That’s strange the video plays for me after I click on the Safari Blurry Text div. I’ll upload a smaller video. Done


#4

Okay I see it now. So you want to fix the blurriness on the video or button text?


#5

The blurry text on the div when it scales up is the issue I encounter on Safari.


#6

Yep, I see it. Here’s a thread from @vincent on this topic already:


#7

Yes this may work on Chrome but I still see the issue in Safari.


#8

Try this custom code solution, and see if it works:

http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/


#9

Thanks for the link. I tried adding custom code to the head tag, but still see blurred text. Is there a custom attribute I can add directly to div in Webflow designer that will work?

<style>
.div-class {
-webkit-transform: perspective(1px) rotate(-10deg);
-moz-transform: perspective(1px) rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: perspective(1px) rotate(-10deg);
}
</style>

#10

Hi @WebDesign, the issue is that Safari seems to have a problem with rendering the text, unlike chrome. I did try a number of custom code solutions, and none of them worked to prevent the text from getting blurred when scaled.

I would probably try to do this another way, one that does not involve scaling the font.

I am not exactly sure what the end design goal is, can you describe how the whole animation should work? it might be easier to create a second element to have that fade in that simulates the effect, allowing you to use separate elements with different dimensions.


#11

Hi @cyberdave I will need to design several of these elements overlapping a background video so I really want to avoid designing at two different scales and doubling the workload having to update text on two elements.

I tried animation in reverse - shrinking a larger div - please revisit the shareable link I posted. This fixes the blurry text in Safari but it adds jagged edges to the parent div visible in both Chrome and Safari. I don’t know what is worse. Do you know of any other workarounds for this rendering issue? Could there be a fix for a shrunk div with jagged edges?


#12

To add, when I tried it, without the rotation, it had less blurriness. If you’re okay with just a little. But as @cyberdave said, I don’t think there’s another way. Even online, there’s no real solution, just hacks. Jaggedness will take place on rotated objects in pixelation, unless you add an svg.


#13

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.