2

我有一个仅在 Google Chrome 中出现的 CSS 问题。设置为的对象overflow: hidden在水平居中的容器内被“剪裁”在边缘，并且仅在奇数浏览器宽度下，并且仅在高分辨率显示器上。

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 个显示像素）显示器上。

在此处输入图像描述

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

编辑：它也发生在纯 CSS 圆形中，因此似乎与使用背景图像无关。

4

2 回答 2

3

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

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

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

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

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

然而overflow: hidden，从:after元素中移除似乎已经完全解决了它。

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

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

于 2014-06-06T12:49:52.813 回答
1

嘿，现在你可以试试这个没有图像

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>

演示

于 2014-06-06T11:24:06.867 回答