Chrome：倾斜时文本模糊：倾斜（-10deg） - >歪斜（10deg） [英] Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)

问题描述

我只是想歪斜父母，然后将其倾斜在孩子身上。

示例：HTML

 < div class =parent> <！ - 歪斜（-10deg） - > 
< div class =child> Hello< / div> <！ - 歪斜（10deg）（偏斜返回） - > 
< / 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的答案是防止问题的另一种解决方案。但如果有人回答了一个真正的解决方案来解决这个偏斜问题（真正的解决方案），我会接受答案。

使用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;溢出：隐藏;填充 - 左侧：5％; position：relative;}。parent :: before {content：'';位置：绝对的;顶部：0;左：0;宽度：100％;高度：100％;背景：rgba（90,190,230,0.9）; transform-origin：0 0;变换：歪斜（-10deg）; z-index：-1;}  

< div class = 父 > Hello< / div>

I just want to skew the parent and skew it back on the child.

Example : HTML

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

Example : CSS

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

Text inside seems ok with Firefox, Safari. But not Chrome and Opera its a bit blurry

I have to use -webkit-backface-visibility: hidden; for reduce box pixelated in Chrome

Firefox :

Chrome :

Firefox vs Chrome :

or zoomed by Photoshop

Live example : http://jsfiddle.net/1tpj1kka/

Any idea ?

---

NOTE !!! : web-tiki's answer is an another way solution to prevent the problem. But if any answered a real solution to resolved this skew back problem (real fix), I will accept the answer.

解决方案

The "blurry text" after 2d or 3d transforms with webkit browsers has been discused many times. But in your case, you can apply the transform only on a pseudo element so that your text isn't affected by the skew property.

It will also alow you to use only one tag in your markup :

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

这篇关于Chrome：倾斜时文本模糊：倾斜（-10deg） - >歪斜（10deg）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！