Question

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

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

转换完成后，黄色标签变好（裁剪很好）。

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

有什么想法吗？

.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>

Answer 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);

如何修复具有溢出的元素的safari子像素错误：隐藏？

1 个答案: