CSS移动文本缩放Safari

Question

我有一些css代码的问题。

我构建了一个带有缩放图像的悬停。在所有浏览器中，除了Safari，它似乎都没问题。

我用这段代码来修复这个问题，不起作用

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

完整的代码可以在这里找到。 Jsfiddle

我认为这是某种反锯齿问题，但我不知道如何解决它:(

Answer 1

尝试将1px的perspective添加到您的缩放变换中，即:

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

这可以解决类似于你所描述的常见的跨浏览器问题。参见:http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

Answer 2

[SOLVED]

我刚刚修复了这个问题。

我添加了

-webkit-backface-visibility: hidden;

和transform: perspective(1px) scale(1.2) ;到wrap:hover img

解决了这个问题，现在safari浏览器运行正常。