溢出像素錯誤：隱藏和變換：翻譯

我有一個帶有標題的框，它是position: absolute並且隱藏着top: 100%。標題的父母有overflow: hidden。當我將鼠標懸停在盒子上時，標題向上滑動，因此完全可見。溢出像素錯誤：隱藏和變換：翻譯

現在的問題是，在這個轉換過程中，存在像素錯誤。這意味着轉換過程中的標題比父框寬1個像素。過渡後一切看起來不錯。

它出現在Windows 8.1的IE 11和Mac 10.11.2的Webkit瀏覽器中。

您應該在this fiddle中看到這種效果。當您看不到像素錯誤時，請嘗試調整窗口大小。

您還會在截圖中看到錯誤。

我已經嘗試：

實際上我看不到錯誤，你可以採取幾個這個像素錯誤的截圖？ –

我沒有看到它（Chrome/Mac 10.11.2） - 你能提供一個截圖嗎？ –

@RyanLittle我上傳了截圖。屏幕截圖是用ie製作的，但在其他瀏覽器中看起來像這樣。 – NinjaOnSafari

-1

我會試試看使用以下選項之一：

位置：相對;

-webkit-transform：translateZ（0px）;

-webkit-font-smoothing：subpixel-antialiased;或webkit-font-smoothing：antialiased

2016-01-07 12:54:33

你能更新小提琴嗎？ – NinjaOnSafari

無法在當前機器上覆制。如果我今天晚上找到一些時間，我會嘗試從其他機器。 –

你不應該使用字體平滑這不是標準的：https：//developer.mozilla.org/en-US/docs/Web/CSS/font-smooth –

我以前遇到過這個錯誤。像素錯誤是由transform：translate引起的。

請在父元素上嘗試此操作。

-webkit-transform-style: preserve-3d; 

-moz-transform-style: preserve-3d; 

transform-style: preserve-3d;

2016-01-13 08:36:17

回答