Chrome :向后倾斜时文本模糊:倾斜(-10 skew ) ->倾斜(10 Skew)

Question

我只想使父服务器倾斜，而将它向后倾斜，就在子服务器上。

示例：

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

示例: CSS

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

里面的文字似乎与火狐，Safari好。但不是Chrome和Opera有点模糊

我必须使用-webkit-backface-visibility: hidden;来减少Chrome中像素化的盒

火狐:

​

​

Chrome :

​

​

火狐与Chrome :

​

​

或通过Photoshop放大

​

​

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

知道吗？

注！：web的答案是另一种防止问题的解决方案。但是，如果有人回答了解决这个问题的真正解决方案(真正的修复)，我将接受这个答案。

Answer 1

使用webkit浏览器进行2d或3d转换后的“模糊文本”是discused many times。但是在您的示例中，您只能将转换应用于伪元素，这样文本就不会受到斜交属性的影响。

它还将告诉您在标记中只使用一个标记：

​

@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>

​

Answer 2

在像下面这样的转换之前添加'translateZ(0)‘会迫使gpu重新呈现文本，并删除Chrome上的模糊。

这是：

transform:  translateZ(0) skew(-10deg);

不是这样的：

transform: skew(-10deg);

Answer 3

您可以尝试text-rendering: geometricPrecision CSS属性。这将迫使你的文本不被反别名，从而使模糊不那么重要。

​

inp.onchange = function(){
   document.querySelector('.child').classList.toggle('geo');
  }

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

.geo{
    text-rendering: geometricPrecision;
  }
.parent {

  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;  
  width:300px;padding-left:15%;margin-left:-15%;overflow:hidden;
}

.child {
  transform: skew(10deg);  
  width:300px;background: rgba(90, 190, 230, 0.9);padding-left: 5%;padding-right: 15%;
}

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child geo">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
<input type="checkbox" id="inp" checked="true"/> geometricPrecision

​