Chrome 39錯誤 - 輸入select（）中斷滾動

我有一個HTML網格，我們使用箭頭鍵導航單元格（如由div製作的電子表格）。每個單元格都有一個INPUT文本框。我們使用javascript來捕獲鍵盤箭頭鍵以在網格中移動。這在所有瀏覽器中工作了一年多。現在，使用Chrome 39時，網格將不再正確滾動，以便在屏幕上顯示帶焦點的輸入。Chrome 39錯誤 - 輸入select（）中斷滾動

這裏是展示問題的一個小提琴：scrolling list。

// This causes scrolling into view on focus to stop working 
$('#grid').on('focus','input',function(e){ 
    this.select(); 
});

使用向上和向下箭頭滾動列表中的單元格。當它觸及頂部或底部時，如果新單元格不在視圖中，它應該滾動到視圖中。

這撥弄例子仍然工作在IE10 +和Firefox罰款，但在Chrome 39（最新版本），當箭頭變成斷底或頂新電池也不會滾動。此外，它看起來像文本框有時重繪幾個像素。

當一個新的小區（輸入）獲得焦點，我們稱之爲this.select（）選擇任何現有的文本。如果我們刪除了對select（）的調用，那麼Chrome 39再次正常工作。但是，用戶希望看到選中的文字。

的問題是：有什麼是我做的，將導致此，或者是一個bug在Chrome 39？如果它是一個錯誤，是否有人知道一個解決方法來選擇輸入文本而不會破壞本地滾動到視圖行爲？任何想法，將不勝感激。

更新：

看來，即使全部刪除JS代碼，只留下一堆投入在滾動的div也將失敗（僅適用於Chrome瀏覽器）。您只能使用不帶JS的選項卡/ shift-tab進行導航，但仍然會出現滾動問題。我會瘋了嗎，還是其他人看到這個小提琴在滾動時會發生同樣的旋轉？

例如參見Updated Fiddle。

來源

2014-12-13 DaveInMaine

真正的奇怪。我試圖修改它，從上到下它可以正常工作，但仍然從下到上導致問題。我猜想有多次重點設置相同的組件。請檢查更新的代碼在這裏http://jsfiddle.net/3hgu50b5/6/我會嘗試檢查是否可以識別它的根本原因。 – 2014-12-13 08:42:38

嗯，看起來它只是在Chrome 39希望的錯誤，他們會得到它之前太長時間固定。

幸運的是，瀏覽器也支持scrollIntoViewIfNeeded（）方法，所以作爲一種解決方法，我能夠做這樣的事情的焦點事件處理程序的幾個瀏覽器之一：

this.select(); 
if (typeof this.scrollIntoViewIfNeeded === "function") 
    this.scrollIntoViewIfNeeded(true);

所以，這解決眼前的問題。

來源

2014-12-17 08:21:03 DaveInMaine

這個問題似乎出現在我的經驗，從固定用z-index值位置的絕對/父容器。這會影響瀏覽器39+

嘗試設置該父容器有以下CSS聲明：

-webkit-backface-visibility: hidden;

來源

2015-01-28 19:14:37 jwal

Chrome 39錯誤 - 輸入select（）中斷滾動

回答

相關問題