Chrome：当倾斜回来时文本模糊：skew(-10deg) -> skew(10deg)

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 vs Chrome：

或者通过Photoshop缩放：

实时示例：http://jsfiddle.net/1tpj1kka/

有什么想法吗？

---

注意！！！：web-tiki的答案是另一种解决问题的方法。但是如果有人回答了真正解决这个倾斜后退问题的解决方案（真正的修复），我将接受此答案。

- l2aelba

---

为什么不使用“伪元素”呢？它在浏览器支持方面比“transform”更好。 - Vucko

@Vucko 不重要吗？http://jsfiddle.net/uy061t79/2/ - l2aelba

@l2aelba 【我的意思是这样的】（http://jsfiddle.net/vucko/uy061t79/3/） - Vucko

@Vucko 谢谢，但是我必须按照我的编码方式进行。 - l2aelba

视觉效果很好的问题。你是如何创建动态gif的？ - redochka

谢谢，只是一个在线GIF制作工具 @redochka - l2aelba

Answer 1

在使用webkit浏览器的2D或3D变换后出现的“模糊文本”问题已经被讨论过很多次。但是在您的情况下，您可以仅将变换应用于伪元素，以使您的文本不受倾斜属性的影响。

这还将使您可以在标记中仅使用一个标签：

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

- web-tiki

---

+up。好主意。谢谢。 - zur4ik

我的情况有点不同（我需要修复一个被扭曲的 div 中的模糊图像），但这个提示对我很有帮助。+1 赞。 - HMartch

Answer 2

在进行如下变换之前添加“translateZ（0）”将强制GPU重新渲染文本并消除Chrome模糊。

此代码块：

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

不是这样的：

transform: skew(-10deg);

- Angus

---

不幸的是，它在当前的Chrome版本72中不再起作用。 - benedikt

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

- Kaiido

---

谢谢，更好了！但是当我在Photoshop中缩放时，我得到了相同的结果。（Mac上的Chrome）http://i.imgur.com/ksgKKPV.png - l2aelba

是的，它并不完美，但我添加了一个切换按钮，这样你就可以看到它仍然可以改善事物。 - Kaiido

是的，这样更好 :D - l2aelba