2015-07-11 45 views
0

我懷疑這與瀏覽器中的一些錯誤有關,涉及不透明度,轉場和翻譯。鉻切斷邊框和其他視覺故障

我無法重現故障的代碼片段,所以我得給你點對活動網站:

tzork.com

完整的源代碼在這裏:MightyPork/tzork,包括編譯爲CSS和JS的SCSS和Typescript。如果您有時間並且可以重現錯誤,如果您試圖找出錯誤,我將不勝感激。我從來沒有見過這樣的事情。


當您將鼠標放在標籤上時,它們會在背面和邊框上產生一個寬度爲2px的邊框。有時候,Chrome只顯示一個像素。當我將寬度更改爲1px時,有時它根本不顯示邊框(僅在邊角附近)。

OK enter image description here enter image description here enter image description here enter image description here

你可以清楚地看到它是如何變得不一致。我的瀏覽器縮放比例爲100%,所以這不是原因。

我不確定發生了什麼,但它顯然取決於當前時間=角度=標籤的位置和WINDOW SIZE。

我把位置繞到最近的像素,所以分數位置不是原因。 我也嘗試舍入到奇數/偶像素,但沒有幫助。


另一個問題是,在Firefox,時而盤旋標籤使鐘面號碼移動/變更字間距。我不明白,沒有任何聯繫。

在鉻有時出現奇怪的平鋪故障在背景圖像(特別是當開發工具面板打開時)。

回答

0

好了,該解決方案:

我說這一切的地方,並呈現故障已經消失。

-webkit-transform: translate3d(0,0,0); 

我不明白。