Javascript窗口調整大小可能的競態條件

給定以下測試用例，預期的行爲是在瀏覽器窗口調整大小時，lightblue元素與紅色父級的大小完全匹配。Javascript窗口調整大小可能的競態條件

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"/></script> 
    <style type="text/css"> 
    #viewport{ 
     width: 100%; 
     height: 30%; 
     background-color: red; 
    } 
    #child{ 
     background-color: lightblue; 
    } 
    </style> 
</head> 

<body> 
    <div id="viewport"><div id='child'></div></div> 
    <script> 
     window.addEventListener('resize', function(){ 
      var width = $('#viewport').innerWidth(); 
      var height = $('#viewport').innerHeight(); 
      $('#child').css('height', height+'px'); 
      $('#child').css('width', width+'px'); 
     }); 
    </script> 
</body> 
</html>

實際行爲上鉻36.0.1985.143是，有時（尤其是在較小的窗口大小）的子元素被設置恰好爲5px小於父元素高和/或更少的1像素寬。如果$('#child').css('width', width+'px');被註釋掉，問題就會停止。

據報道，這個問題並沒有發生在Firefox上。

類似的問題似乎已被拾起http://thewebivore.com/using-settimeout-win-race-condition-changing-views/但是我還沒有能夠緩解它與超時< 10毫秒這不是一個真正的解決方案。

來源

2014-09-04 Bicubic

沒有看到這個問題在所有http://jsfiddle.net/ moogs/kpmL8tuh/Chrome 37.0.2062.94 – 2014-09-04 05:22:37

什麼是藍色元素？上面的測試用例輸出一個空窗口。順便說一下，爲什麼你不能在css本身設置大小..？ – 2014-09-04 05:25:14

@使用JSFiddle無法使用該示例。它應該在瀏覽器中直接運行。 – Bicubic 2014-09-04 05:32:53

我已將您的示例代碼插入到fiddle中，我似乎還有其他一系列問題。

不過，如果我使用vh和vw代替%，我得到更好的結果：

#viewport { 
    width: 100vw; 
    height: 30vh; 
    background-color: red; 
} 
#child { 
    background-color: lightblue; 
}

fiddle here ...

來源

2014-09-04 05:23:18

可以確認它的工作原理，但由於兼容性原因，並不是真正有吸引力的解決方案。另請注意，JSFiddle包裝對我的示例造成完全不同的行爲。它應該在瀏覽器中直接運行。 – Bicubic 2014-09-04 05:36:13

Javascript窗口調整大小可能的競態條件

回答

相關問題