如何修复溢出元素上的 safari 亚像素错误：隐藏？答案

【问题标题】：How can i fixed safari sub-pixel bug on elements with overflow: hidden?如何修复溢出元素上的 safari 亚像素错误：隐藏？
【发布时间】：2017-05-13 04:20:56
【问题描述】：

我正在尝试在左上角创建一个带有标签的框。此标签必须在鼠标悬停时滑动。

当我在 Safari 浏览器 (Mac OS El Capitan) 中将鼠标悬停在此框上时，我会看到以下错误：http://newsletters.loginov.biz/1.png

过渡完成后，黄色标签就可以了（剪辑效果很好）。

注意！我发现当视口宽度为奇数时会发生这种情况。（您可以逐步调整浏览器大小来查看此问题）。

有什么想法吗？

.box { 
position: relative; 
overflow: hidden; 
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
background: #212121;
box-shadow: 0 0 8px rgba(0,0,0,.13);
-webkit-transition: box-shadow 250ms;
transition: box-shadow 250ms;
}

.box:after { 
position: absolute; 
z-index: 1; 
top: 0; 
right: 0; 
border-left: 60px solid transparent; 
border-top: 120px solid #ffcc32; 
content: ''; 
-webkit-transform: translate(30px, -60px);
transform: translate(30px, -60px);
-webkit-transition: transform 250ms;
transition: transform 250ms;
}

.box:hover {
  box-shadow: 0 0 45px rgba(0,0,0,.35);
}
.box:hover:after { 
-webkit-transform: none;
transform: none;
}

<div class="box">
<img src="http://s.appleinsider.ru/2016/06/macOS-Sierra-Wallpaper-iPhone-Plus-Wallpaper.jpg" alt="test img" />
</div>

【问题讨论】：

标签： css safari

【解决方案1】：

我知道，这不是一个优雅的解决方案，但帮助我解决了完全相同的问题。在我的情况下，行中有多个元素，并且当包装元素居中时会重现问题。因此，当包装器具有奇数宽度而视口也具有奇数宽度时，它不能在 Safari 中完全居中（对于偶数宽度也是如此）。所以你的包装纸必须有一个相反的折叠。我的解决方案中的 JQuery 用于快速添加/删除类 - 您可以使用自己的方法。

var $wrapper = $('.wrapper'), fixSafariSubpixelDelay;
function fixSafariSubpixel() {
  clearTimeout(fixSafariSubpixelDelay);
  fixSafariSubpixelDelay = setTimeout(function() {
    if (window.innerWidth % 2 == 0)
      $wrapper.removeClass('even').addClass('odd');
    else
      $wrapper.removeClass('odd').addClass('even');
  }, 100);
};

window.addEventListener('resize', fixSafariSubpixelDelay);

【讨论】：