Question

Note: This will be reported to Google as a bug but fixes often get delayed.

A web page that calls a function based on a window's width works in IE, Firefox, etc. but "sometimes" fails in Chrome. The problem (in Chromium-based browsers) only occurred when the target web page automatically reloads upon browser startup.

<script>

var dde = document.documentElement;

if(!document.documentElement) dde = document.body; // fix for IE6 and earlier 

myWidth = Math.max(dde.scrollWidth,dde.offsetWidth,dde.clientWidth);

if(myWidth < 960) document.location.href="http://www.gooplusplus.com/mini.php";  

</script>
Was it helpful?

Solution

Further testing found that upon browser startup, Chrome took its window width results from the non-maximized window size even though the window was actually maximized. Furthermore, this error occurred only on the non-active browser tabs.

Two steps required on the way to a solution were to detect:

(1) is the browser Chromium-based? --> navigator.userAgent.indexOf("Chrome/")>0

(2) is the tab inactive? --> document.webkitVisibilityState == "hidden"

test URL: http://www.gooplusplus.com/chrome-bug.html

my partial solution:

<script>

var dde = document.documentElement;

var tabVisible = document.webkitVisibilityState;

if(!document.documentElement) dde = document.body; // fix for IE6 and earlier 

myWidth = Math.max(dde.scrollWidth,dde.offsetWidth,dde.clientWidth);

if( ( navigator.userAgent.indexOf("Chrome/")<0 || tabVisible!="hidden" ) && myWidth < 960 ) 
    document.location.href="http://www.gooplusplus.com/mini.php";  

</script>

This was all that was needed for my window width-based URL redirection. However, this bypassed another hypothetical case where (1) the browser is Chrome, (2) tab was inactive (hidden), BUT (3) maximized size was indeed < 960 pixels. So, is there a more complete solution?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top