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 回答