Safari text blurs over background video

[WebDesign]

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

[garymichael1313 (G.J.)]

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

[WebDesign]

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

[garymichael1313 (G.J.)]

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

[WebDesign]

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

[garymichael1313 (G.J.)]

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

A fix for when your elements move up and/or blur during animations/interactions on Chrome

If you do a lot of nice interactions/animations, you may have noticed some elements being jiggy during the animations: they blur and tend to move a pixel up, texts lose their antialiasing for the span of the animation. I could almost fix them all with the code I found in this post: http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome I’m using this: .yourDivClass { -webkit-backface-visibility: hidden; -webkit-transform: transl…

[WebDesign]

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

[garymichael1313 (G.J.)]

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/

[WebDesign]

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>

[cyberdave (Dave S.)]

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.

[WebDesign]

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?

[garymichael1313 (G.J.)]

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.