iPad上的CSS Skew Jagged Edges

时间:2013-04-20 00:27:45

标签: css ipad webkit skew

我有一个广泛使用CSS偏斜的网站作为设计的一部分。除了iPad之外,使用背面可见性解决了锯齿状边缘问题。在所有其他webkit浏览器中,包括iphone,边缘是平滑的,但由于某种原因iPad没有表现。以下是偏斜的代码:

-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
backface-visibility:         hidden;
overflow:                    hidden;

-webkit-transform: skewX(16deg);
-moz-transform:    skewX(16deg);
-ms-transform:     skewX(16deg);
transform:         skewX(16deg);

/* IE8+ */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.28674538575880865, M21=0, M22=1, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.28674538575880865, M21=0, M22=1, SizingMethod='auto expand');

这是网站:acumen.org

1 个答案:

答案 0 :(得分:7)

-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
backface-visibility:         hidden;

与此一起添加以下行:

outline: 1px solid transparent;