當使用CSS翻譯時，陰影和邊框分離

在使用負面翻譯（該技術解釋爲here）絕對定位的單個元素上使用邊框和陰影時，我遇到了Firefox和IE中的奇怪渲染錯誤（它似乎在Chrome中工作）。當使用CSS翻譯時，陰影和邊框分離

當元件具有不均勻的尺寸，元件被放置在其上（可能是由於不同的舍入）分隔的陰影，並且彼此的邊界半個像素，露出難看的間隙：

Shadow (green) is separated from the border (blue)

的例子可在此codepen，但你也可以通過將文檔中的DIV，並使用以下CSS重現此：

body { 
    background: black; 
} 

div { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 299px; 
    height: 99px; 
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 50px 20px springgreen; 
    border: 10px solid deepskyblue; 
}

你有任何想法如何避免這個問題，怎麼樣我可以強制元素被放置在一個完整的像素？正如文章所建議的那樣，我嘗試將transform-style: preserve-3d添加到父元素，但那並不奏效。

來源

2014-08-29 poke

我只能重現Internet Explorer 11和邊緣中的錯誤。它似乎在FireFox，鉻（沒有測試其他人，如歌劇）工作正常。

注意：半像素問題只發生在渲染區域本身具有不均勻尺寸時。

您可能在此期間自己發現了這一點，但僅供參考：我發現的唯一解決方法是使用將四捨五入爲全像素的值。將.1添加到不規則大小的元素將使其四捨五入到最接近的較高的偶數值，以便它能夠「捕捉」不支持真正子像素渲染的瀏覽器中的像素，而在支持它的瀏覽器上不會發生可見的變化，位置的差異將是20像素。

所以更新的代碼將

div 
{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 299.1px; 
    height: 99.1px; 
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 50px 20px springgreen; 
    border: 10px solid deepskyblue; 
}

您可以找到問題的code pen示範和我個人使用的修補程序。

來源

2017-10-13 13:34:00 Wndrr

是的，因爲我在三年前遇到過這個問題o.O - 它已經被固定在Firefox中。至於你的'.1'修復，這實際上是一個相當不錯的解決方法，不錯:) :) – poke 2017-10-13 14:13:50

是的，我自己遇到了問題，但在IE瀏覽器。在網上發現了一些黑客，但我認爲這是最好的，因爲我看到你的文章沒有答案，我認爲它是有道理的，給它一個律'更新和解決其他人的工作:-) – Wndrr 2017-10-13 14:19:31

當使用CSS翻譯時，陰影和邊框分離

回答

相關問題