Chrome:向后倾斜时文字模糊:歪斜(-10度) - >歪斜(10度)

Question

我只想扭曲父母并将其歪斜在孩子身上.

示例:HTML

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>

示例:CSS

.parent {
    transform: skew(-10deg);
}
.child {
    transform: skew(10deg);
}

使用Firefox,Safari,里面的文字似乎没问题.但Chrome和Opera并不是有点模糊

我必须使用-webkit-backface-visibility: hidden;Chrome中的缩小框像素化

Firefox:

Chrome:

Firefox与Chrome:

或通过Photoshop缩放

实例: http ://jsfiddle.net/1tpj1kka/

任何的想法 ？

---

注意 !!!:web-tiki的答案是另一种防止问题的解决方案.但如果有人回答了一个真正的解决方案来解决这个偏斜问题(真正的修复),我会接受答案.

Answer 1

使用webkit浏览器进行2d或3d变换后的"模糊文本"已被多次讨论过.但在您的情况下,您可以仅对伪元素应用转换,以便您的文本不受skew属性的影响.

它还会让您在标记中只使用一个标记:

@import url(https://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {
    width: 300px;
    overflow: hidden;
    padding-left: 5%;
    position:relative;
}

.parent::before {
    content :'';
    position:absolute;
    top:0;left:0;
    width:100%; height:100%;
    background: rgba(90,190,230,0.9);
    transform-origin:0 0;
    transform:skew(-10deg);
    z-index:-1;
}

<div class="parent">
    Hello
</div>