頁面加載的第一個「焦點」事件Safari抖動/跳躍（bug？）

我目前正在對付Safari上非常令人沮喪的錯誤，而且我不確定在哪裏可以轉向。頁面加載的第一個「焦點」事件Safari抖動/跳躍（bug？）

看來最元素（但不是全部，我不能辨別的差異化因素），將觸發focus事件會導致被轉移或動畫的網頁上的所有元素跳到〜2px的頂端離開。這隻發生在頁面加載後的第一個焦點事件中。

看到這個bug有點煩人，因爲它在droplr.com的登錄部分，而且我已經完全無法在JSFiddle上提煉出一個更簡單的案例。

如果您有/創建一個帳戶和登錄，點擊這個編輯圖標下降：

enter image description here

你會看到頁面上，東西抖動的第一焦點。這裏的時間表時，有頁面上的落單，我觸發焦點違規元素：

enter image description here

隨着越來越多的下降，它只是更多的相同，但它似乎最大出約40油漆。而剖析器並沒有暗示任何有害的東西。只是通過jQuery內部之旅。

如果不是通過translate3d或matix3d來鋪設元素，我只需使用top和left，這個錯誤就消失了。經過幾個小時和幾個小時的調試，我完全喪失了工作。

希望有人看到類似的東西，可以看看，或者可以給我調試下一步的建議。

非常感謝！

更新：戴夫Desandro suggested它是3D加速踢，所以我嘗試過了一個translate代替，果然，這並沒有引起抖動。我不知道爲什麼硬件加速會通過focus事件觸發，但只有一次。

我已經嘗試在頁面加載中設置transformZ爲0並繼續增加硬件，但在那裏也沒有運氣。歡迎任何更多的想法。

來源

2012-03-29 Joshua Cody

什麼是Safari版本？剛剛檢查Safari 5.1.4 - 看起來很好。我知道webkit與動畫和轉換相關的幾個bug，但它們與文本渲染/反鋸齒相關，而不是矩陣位置; – 2012-03-29 14:42:25

有趣的是，我也在5.1.4上，而且我知道它發生在5.2上。 – 2012-03-29 14:46:19

你有沒有試過-webkit-backface-visibility：hidden;在那些元素上？試一試。 – Undefined 2012-03-29 19:00:16

我在使用自定義字體套件時發生過這種情況。這可能是問題嗎？某些事件會導致自定義字體重新繪製，這會導致頁面顯示中出現如此輕微的「抖動」。

有時，手動設置所有父HTML元素的高度和寬度可以減少閃爍。

來源

2012-04-07 23:34:06 BishopZ

不幸的是，這並沒有解決我的問題。不過謝謝！ – 2012-04-08 05:13:27

我知道這個問題被張貼在不久前，這是一個有點長鏡頭，但這裏有雲：

也許爲起點回去鉻，並期待在複合分層：

在地址欄中輸入： about：flags

您將能夠從那裏啓用複合邊界。紅色邊框通常指示渲染問題：

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

我從一次發現時間是，雖然有在Chrome渲染問題的瀏覽器科佩斯很好與我隱藏它們。然而，在其他基於webkit的瀏覽器中，結果可能更爲明顯（即android）。

當z-index與正在轉換的內容一起使用時，我也看到了閃爍現象。

無論哪種方式，知道你是如何解決這個問題（如果你這樣做）會很好。或許可以給你自己的問題發表一個答案？

來源

2012-12-31 09:36:56 backdesk

我有這個問題而回，並老實說，我不記得究竟是原因，但這裏有一些我遵循的步驟：

檢查你沒有hide（）和在下一行顯示（）相同的元素，反之亦然。例子： el.show（） el.hide（）

更改自定義字體爲「宋體」

對於你不想焦點事件在腳本的底部添加以下代碼的元素： noFocusElem.off('focus'); 這將確保刪除您可能添加的任何焦點處理程序錯誤

最後將您的css放在任何腳本之前。這是一個已知的事實，一個內嵌樣式後添加CSS規則已經應用可能會導致，特別是如果你使用線hieght財產

希望這有助於:)

來源

2013-03-19 02:02:43

的一種方式，以避免花費時間負載固定時間抖動抽搐;您可以將頁面設置爲隱藏，然後使用可見的加載元素。如果您的網頁加載速度較慢，則可能希望將微調控制檯默認爲可見，然後讓負載隱藏它。如果沒有更好的辦法，你可以回到這個問題上來。

來源

2013-05-15 13:57:53

只是我的2C值得。

我想嘗試的第一件事： 首先在chrome中敲擊'about：flags'（是的，我知道你沒有使用Chrome）。找到'合成渲染圖層邊框'並將其打開。一旦這個功能被打開，你就會大致瞭解渲染/硬件加速的內容。

參見：http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

，尋找任何渲染問題。這些通常是由z索引引起的。玩弄任何z索引，並隱藏/顯示某些元素，直到渲染問題得到解決。然後從那裏工作。 translate-z黑客和不透明也會導致問題。

根據經驗，我發現其他webkit瀏覽器中的渲染問題可以使用chrome進行診斷。閃存是股票android瀏覽器上常見的現象。

其次：看看焦點事件本身，並嘗試諸如防止默認行爲。看起來好像對我來說是一個很長的鏡頭，但給它一個去。

來源

2013-06-14 14:18:43 backdesk

我沒有測試過這一點，所以如果它的工作原理......但在這裏我會很驚訝有一個想法：

$(document).ready(function() { 
    $(document).focus(function(e) { 
    e.preventDefault(); 
    }); 
    $(document).click(function() { 
     $(document).unbind(); 
    }); 
});

來源

2013-08-01 07:38:30 EmmaGamma

我一直運行到同樣的問題，最近，發現一些固定它在我的情況。

檢查什麼，是隱藏在屏幕外，如：

text-indent: -9999px; 
left: -9999px;

從3D刪除這些任何實例加速元素（包括兒童）停止對重點內容跳躍我。

來源

2013-08-26 20:21:57 Justin

頁面加載的第一個「焦點」事件Safari抖動/跳躍（bug？）

回答

相關問題