我如何修复Safari上的子像素错误：隐藏？

我正尝试在左上角创建一个带有标签的框。该标签必须在鼠标上滑动。我如何修复Safari上的子像素错误：隐藏？

当我将鼠标悬停在该对话框在Safari浏览器（的Mac OS埃尔卡皮坦）我观看以下错误：http://newsletters.loginov.biz/1.png

当过渡完成黄标变成OK（剪裁很好）。

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

任何想法？

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

来源

2016-12-28 Артем Логинов

我知道，这不是一个很好的解决方案，但与完全一样的问题，帮助我。在我的情况下，行中有多个元素，并且在包装元素居中时再现问题。因此，当包装具有奇数宽度，而视口具有奇数宽度时，它不能在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);

来源

2017-01-20 09:19:51

我如何修复Safari上的子像素错误：隐藏？

回答

相关问题