我如何修復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上的子像素錯誤：隱藏？

回答

相關問題