Clever Geek Handbook

CSS move text around Safari timeline

I have a problem with some css code.

I am creating a hover with an image inside these scales. Every browser seems to be okey except Safari.

I used this code to fix the problem, didn't work.

transform: translate3D(0,0,0);
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;

The complete code you can find here. Jsfiddle

I think this is some kind of anti-aliasing problem, but I have no idea how to fix it :(

+3


source to share


2 answers


[solved]

I just fixed the thnx issue for bwright.

I added



-webkit-backface-visibility: hidden;

to transfer img

and transform: perspective(1px) scale(1.2) ;

For wrap: hover img

Fixed the issue and it was now smooth on safari.

0


source


Try adding perspective

of 1px

to your scaled transforms, i.e .:

transform: perspective(1px) scale(1.2);


This can fix common cross-browser issues similar to what you are describing. See Also: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

+1


source






More articles:


All Articles