diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index d4b1f27c4..85b56cab1 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -1150,10 +1150,21 @@ const getPopupData = async function(tabId) { tabId = parseInt(matches[1], 10) || 0; } + const nextFrame = ( ) => { + return new Promise(resolve => { + self.requestAnimationFrame(( ) => { resolve(); }); + }); + }; + // The purpose of the following code is to reset to a vertical layout - // should the viewport be not enough wide to accomodate the horizontal + // should the viewport not be enough wide to accomodate the horizontal // layout. - const checkViewport = function() { + // To avoid querying a spurious viewport width -- it happens sometimes, + // somehow -- we delay layout-changing operations to the next paint + // frames. + const checkViewport = async function() { + await nextFrame(); + const root = document.querySelector(':root'); if ( root.classList.contains('desktop') ) { const main = document.getElementById('main'); @@ -1168,14 +1179,15 @@ const getPopupData = async function(tabId) { } } } - self.requestAnimationFrame(( ) => { - document.body.classList.remove('loading'); - }); + + await nextFrame(); + + document.body.classList.remove('loading'); }; getPopupData(tabId).then(( ) => { if ( document.readyState !== 'complete' ) { - self.addEventListener('load', checkViewport, { once: true }); + self.addEventListener('load', ( ) => { checkViewport(); }, { once: true }); } else { checkViewport(); }