Bad quality in a textblock

Known Issues
#1

Hey!

I have a question. If you look at my preview link the text pendelkoll.se (seperate textblock) is of bad quality in all browsers even tho it’s the same font and have the same slide in effect as the rest of the text. How come? Also in Firefox the first word in slide 2 “Få” jumps down couple of millimeters after the animation. That is a problem I had for a long while.

54

http://livepreview.adform.com/?tag=12451928&e=0&positioning=1%3Dx%3A0%2Cy%3A0%2Cs%3Afalse%3B2%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A620%2Cz%3A10000%2Cs%3Afalse%3B3%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A1000%2Cz%3A10000%2Cs%3Afalse%3B4%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A1270%2Cz%3A10000%2Cs%3Afalse%3B5%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A1450%2Cz%3A10000%2Cs%3Afalse%3B6%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A1720%2Cz%3A10000%2Cs%3Afalse%3B7%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A2060%2Cz%3A10000%2Cs%3Afalse%3B8%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A2360%2Cz%3A10000%2Cs%3Afalse%3B9%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A2470%2Cz%3A10000%2Cs%3Afalse%3B10%3Df%3A1%2Cp%3ALiTi%2Cx%3A0%2Cy%3A2610%2Cz%3A10000%2Cs%3Afalse

#2

Hi Rasmus:

This looks great for me in every browser – are you viewing this on a retina or non retina screen?

Can you see if disabling ‘Use Webkit Graphics Acceleration’ resolves this issue for you? Also, if you can set the ‘scale’ of that text to be 1.0 (instead of .75)this might also encourage the browser to render it correctly.

Some browsers do have an issue with text transformed on the X or Y axis, but I can’t personally reproduce this. A quick workaround if you need to get this out is to render that text as an optimized PNG.

Here’s what I see in Firefox 62.0.3:

Chrome text scaling jitters as it re-renders
#3

Looks good on booth… MacBook Pro and iPad Pro (Retina).

#4

To elaborate on this - when using a 3D transformation, browsers will treat the element as a bitmap image for all operations, so effects like scaling where it may have been able to re-render text to fit the size will now be pixelated/blurred due to interpolation of the bitmap. I’d recommend changing the font size so that the scale for the element is at 100% and you’ll probably be okay (though I’d need to see a zip of the .hype document for more details).

1 Like