溢出问题：隐藏在“视网膜”显示屏上的Chrome中
阿德
我有一个仅在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/[email protected]");
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圆形也会发生这种情况，因此似乎与背景图片的使用无关。
阿德
我的示例过于简化，因此问题不是独立发生的。
事实证明，通过在我的完整应用程序中使用SASS mixin，我将以下内容应用于包含精灵的面板（包括它的编辑问题）
-webkit-transform: translate3d(0px,0px,0px);
在那里可以通过可用的硬件加速（主要是iOS）来提高CSS性能。
删除此选项可以稍微改善这种情况，因此在调整窗口大小时似乎不太可能“剪切”形状。
但是，overflow: hidden从:after元素中删除似乎已完全解决了它。
值得注意的是，即使使用纯CSS圆，也会出现这种“剪切”副作用，它与背景图片无关（感谢@Rohit）。
这似乎是一个渲染错误，而不是我做错的事情。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是
- 3
错误：“ javac”未被识别为内部或外部命令，
- 4
Modbus Python施耐德PM5300
- 5
为什么Object.hashCode（）不遵循Java代码约定
- 6
如何正确比较 scala.xml 节点？
- 7
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 8
在令牌内联程序集错误之前预期为 ')'
- 9
数据表中有多个子行，asp.net核心中来自sql server的数据
- 10
VBA 自动化错误：-2147221080 (800401a8)
- 11
错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'
- 12
如何在JavaScript中获取数组的第n个元素？
- 13
检查嵌套列表中的长度是否相同
- 14
如何将sklearn.naive_bayes与（多个）分类功能一起使用？
- 15
ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）
- 16
ES5的代理替代
- 17
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 18
如何监视应用程序而不是单个进程的CPU使用率？
- 19
如何检查字符串输入的格式
- 20
解决类Koin的实例时出错
- 21
如何自动选择正确的键盘布局？-仅具有一个键盘布局
我来说两句