瀏覽器在工具提示庫底部添加了一個邊框樣式（奇怪的行爲）

Question

從昨天開始，我一直在這個工具提示庫中工作。我不知道這個問題是爲了我的睡眠還是什麼，但我不知道發生了什麼。

這個提示庫下方的想法很簡單：用戶在任何HTML元素添加自定義數據屬性（我的意思是data-）與他想要的工具提示中顯示的消息，並有出現。有一些選項可以添加，例如工具提示的方向，以及用戶是否要「剪切」工具提示中的單詞。

下面是一個例子：

<div data-msg="Hi, I'm a tooltip with a text veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery large" data-orient="right" data-break="yes">Hover me and the tooltip will show!</div> 

一切都很好，與底部，右和離開方向，但是當我加入頂部方位，瀏覽器增加了一個物種的「邊框「在工具提示的底部。。我不知道爲什麼，但我無法修復它。

很奇怪，因爲在其他方向不會出現問題。

你可以看到下面的圖片中存在的問題（第一個提示有data-orient="top"和第二提示有data-orient="right"。

如果有人知道如何解決這個問題，我想解釋我發生了什麼。

這裏的Fiddle。

謝謝， 獅子座！

編輯：我使用Chrome 28版本的工作，我的操作系統是Windows 7

Answer 1

這是一種解決方法，而不是一個真正的解決方案 - 但不應該在這種情況下，任何嚴重的副作用（沒有保證，雖然，見下文）。除了這似乎是一個Chrome渲染錯誤，我沒有什麼解釋。

一下添加到[data-msg]::before：

-webkit-backface-visibility: hidden; 

背面能見度趨於解決了不少Chrome的渲染錯誤，不管事實，即它實際上與3D做轉換 - 這似乎也解決這種情況下， 。

解決問題的原因可能與使用不同（硬件加速）轉換引擎的Chrome在你添加任何3D轉換元素的時刻有關。這可能有性能損失，這使我們的另一個無意義的規則，至少使用如果您遇到的問題，以提高性能：

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

ETA：單獨-webkit-transform實際上似乎不足以解決問題。試試兩者，看看它們中是否有其他問題。

已經有reports of -webkit-backface-visibility crashing iOS。因此，請在此處進行測試，然後嘗試使用translate3d，或者在iOS上專門禁用此修復程序（並在出現該錯誤時使用該修補程序）。

張貼在評論，這裏的問題更小例子 - 儘管它有時不能......失敗，應該大多有不需要的暗邊框底部：

JSFiddle

該錯誤似乎是由transition s與border-radius和opacity組合引起的。 可能inline-block和padding在錯誤中也有作用，但有時它們的移除會修復邊界，有時它不會。我希望backface-visibility解決方法更加一致。