Streaming live at 10am (PST)

Safari text blurs over background video

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

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

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

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

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

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

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

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/

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>

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.

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?

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.

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