背景可见性使文本在孩子元素中模糊 [英] backface visibility Making text blurry in child element

问题描述

我想为我的布局做出可堆叠的六边形，使用css3的奇妙的转换功能！唯一的问题是，当我和a：hover效果改变不透明度，在过渡期间，它改变反别名属性，平滑所有行，并使文本模糊。它也暂时不对齐它周围的一切，虽然它都沉淀了一秒钟左右。虽然这不一定会与网站的功能冲突，但是看起来很麻烦。

我试图通过将代码更改为：

http://jsfiddle.net/QPbJL/ p>

虽然这解决了所有的bugginess，现在我的文本是模糊的，在转换期间和其他。我试过添加-webkit-backspace-visibility：none;到.HexDesc，因为这是文本的直接容器。

  .HexIn2 {
 overflow：hidden; 
 width：100％; 
 height：100％; 
 -webkit-backface-visibility：hidden; 
 
 -webkit-background-size：125％; 
 -moz-background-size：125％; 
 background-size：125％; 
 visibility：visible; 
 
 -webkit-transform：rotate（-60deg）; 
 -moz-transform：rotate（-60deg）; 
 -o-transform：rotate（-60deg）; 
 -ms-transform：rotate（-60deg）; 
 transform：rotate（-60deg）; 
 transition：all 0.5s ease; 
} 
 
 .HexDesc {
 padding：3px; 0px 3px 0px; 
 -webkit-backface-visibility：none！important; 
 background：#ffffff; 
 color：＃000; 
 margin-top：106px; 
 height：81px; 
 font-family：'PT Sans Narrow'，sans-serif; 
 line-height：85％; 
 letter-spacing：1px; 
 font-size：13px; 
} 
  

但是，这没有效果。我也试过在那里投掷！重要的，试图让它覆盖所有的东西在那个div，再次zilch！它就像HexDesc容器中的任何东西，直到背面可见性绝对零效果！这是非常令人沮丧的：CI想知道是否有人知道为什么会发生，以任何方式我可以绕过它？

解决方案

通常是中间值的情况。对于旋转，你会得到的模糊只有在0，90，180，270，360 ...这是一个来自浏览器本身的错误。
你可能会注意到，这适用于css中的许多事情（例如，不透明度通常在1或0时会有涓滴效应）。

如果用 180deg 替换 120deg ，所有 60deg 与 90deg ，它会工作完美。 （意思没有模糊，但你不会得到六边形了）。对于三角形，我建议使用此边框黑客（ http：//apps.eky .hk / css-triangle-generator / ）。

对于暂时不匹配，它也是Chrome（以及其他可能的浏览器，我不知道）的已知错误知道）。即使你去gmail或youtube，你仍然会看到这种情况发生。

I'm trying to make stack-able hexagons for my layout, made using css3's wonderful transform capabilities! The only problem is that when I and a :hover effect to change opacity on it, during the transition it changes the anti-alias properties, smooths all lines, and makes the text blurry. It also temporarily dis-aligns everything around it, though it all settles back after a second or so. While this doesn't necessarily conflict with the functionality of the site, it's rather sloppy looking.

I tried to resolve the issue by changing the code to this:

http://jsfiddle.net/QPbJL/

While this fixes the bugginess of it all, now my text is blurry, during transition and otherwise. I've tried adding -webkit-backspace-visibility: none; to the .HexDesc, since that's the direct container for the text.

.HexIn2 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;

-webkit-background-size: 125%;
-moz-background-size: 125%;
background-size: 125%;
visibility: visible;

-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
transition: all 0.5s ease;
}

    .HexDesc {
    padding: 3px; 0px 3px 0px;
    -webkit-backface-visibility:none !important;
    background: #ffffff;
    color:#000;
    margin-top:106px;
    height: 81px;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height:85%;
    letter-spacing:1px;
    font-size: 13px;
    }

However, this has had zero effect. I've also tried throwing "!important" in there, to try and make it over-ride everything else in that div, and zilch again! It's like anything in the HexDesc container as far as backface-visibility has absolutely zero effect! This is very frustrating :C I was wondering if anyone knew why this was happening, and any way I could get around it?

解决方案

It is often the case with "middle" values. For rotation, you'll get the blur off only at 0, 90, 180, 270, 360... This is a bug from the browsers themselves. You might notice that this applies to many things in css (for example, opacity often has trickle down effect when not at 1 or 0).

In your case, in your jsfiddle, if you replace all 120deg with 180deg and all 60deg with 90deg, it'll work perfectly. (meaning no blur, but you don't get the hexagon anymore). For the triangles, i'd recommend making them with this border hack (http://apps.eky.hk/css-triangle-generator/). You can get to an identical result.

For the "temporarily dis-align", it is also a known bug from Chrome (and possibly other browsers, I don't know). Even if you go to gmail or youtube, you'll still see that happening.

这篇关于背景可见性使文本在孩子元素中模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！