Question

我的CSS问题只发生在Google Chrome中。设置为overflow: hidden的对象正被剪裁＆＃39;在水平居中的容器内的边缘处，并且仅在奇怪的浏览器宽度，仅在高分辨率显示器上。

HTML：

<html><body>
  <div id="container">
     <div class="sprite"> </div>
  </div>
</body></html>

CSS：

#container
{
  margin: 0 auto;
  max-width: 800px;
  -webkit-transform: translate3d(0px,0px,0px);
}

.sprite
{
  width: 30px;
  height: 30px;
  overflow: hidden;
  position: relative;
}

.sprite:after
{
  content: ' ';
  overflow: hidden;
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("/img/sprite@2x.png");
  background-position: 0 0;
  background-repeat: no-repeat;

  -webkit-background-size: 30px 30px;
  -moz-background-size: 30px 30px;
  -o-background-size: 30px 30px;
  background-size: 30px 30px;
}

现在，当我调整窗口的宽度时，在奇数窗口宽度处，精灵会在我的视网膜显示屏的任意一侧被剪裁。它不会出现在标准（1 css像素到1显示像素）显示屏上。

enter image description here

在Safari或Firefox中不会出现这种明显的渲染错误。这是在OS X 10.9.3上运行Chrome 35。

编辑：它也会出现纯CSS圈形状，所以似乎与使用背景图像无关。

Answer 1

我的示例过于简化，因此问题不会独立发生。

事实证明，通过我的完整应用程序中的SASS mixin，我将以下内容应用于包含精灵的面板（编辑问题以包含它）

-webkit-transform: translate3d(0px,0px,0px);

这可以通过硬件加速（主要是iOS）来提高CSS性能。

删除它可以略微改善这种情况，因此在调整窗口大小时似乎不太可能“剪切”形状。

但是，从overflow: hidden元素中删除:after似乎已完全解决了这个问题。

值得注意的是，即使使用纯CSS圈子也会发生这种“剪辑”副作用，它与背景图像无关（感谢@Rohit）。

这似乎是一个渲染错误，而不是我做错了。

Answer 2

嘿，现在你可以尝试使用out image

<强>的CSS

#container
{
  margin: 0 auto;
}

.sprite
{
  width: 30px;
  height: 30px;
  position: relative;
    text-align:center;
    line-height:30px;
    font-weight:bold;
}

.sprite:after
{
  content: ' ';
  overflow: hidden;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
    right:0;
    bottom:0;
  background:#eecc00;
    border-radius:50%;
    z-index:-1;
}

<强> HTML

<div id="container">
     <div class="sprite">! </div>
  </div>

<强> Demo

溢出问题：在视网膜上的Chrome中隐藏了＃39;显示

2 个答案: