Ctrl + F5导致页面跳转，但F5不会

Question

I am getting this strange behavior in Firefox browser in one of my client's website pages.

When I clear cache and refresh, or, refresh the page using Ctrl+F5 the page's formatting gets distorted.

Immediately after this if I press F5 (and not Ctrl+F5) the page loads correctly.

I tried to troubleshoot and reset the browser as per the links here and here .

I also searched through the net and various forums of firefox but could not get this resolved.

The Firefox version is 41 but I think the issue is with all the versions.

This is working fine is Chrome.

The URL with the issue is here .

The following screenshot would also help understand my question.

Please help!

Answer 1

You have <div id="page"> whose width is set to 911px in CSS. Then you have a script which changes its width to 100% on $(document).ready() event.

Now, the ready event cannot fire until all synchronous JavaScript files, and the document itself is loaded. On a primed cache, the JavaScript files will load faster hence the ready event will fire quicker, setting the page width to 100% before you notice it.

However, on an empty cache, the JavaScript files will take longer time to load. The browser might render some part of the page before the ready event is fired. In fact, the second screenshot shows a "Transferring data from..." status which (most likely) means that the page is not loaded yet.

Solution:

You want to prevent the page from jumping around when it is loaded and you need to set the page width via JavaScript and you cannot wait until document ready/page load. One solution is to inline the JavaScript code that changes the page width. First define these CSS classes:

#page { width: 911px; }
#fullwidth + #page { width: 100%; }

Then insert few lines of inline JavaScript:

<script>
if (mustBeFullWidth) {
    document.write('<div id="fullwidth"></div>');
}
</script>
<div id="page">
    <!-- content -->
</div>