CODEWITHSUNDEEP
htmlcssloadingflicker
user2992350
user2992350

Reputation: 23

Webpage content flickers/ moves on loading

I have recently taken control of a large website. My problem is that sometimes, on some browsers/ computers, when you navigate between pages (or hit refresh) the entire content loads slightly to the right, then half a second later, jumps back to the left where it should be. The distance is only around 5mm, over the course of a second, but it is noticeable.

Things that are useful to know:

It is a wordpress site, but has only basic functions- The menu contains jQuery but there's little other javascript to prevent loading.

All content is wrapped within a container that is centred using 

{margin: 0 auto;}

There are several CSS style sheets, and some major tags such as the container have been defined several times- i even found a discrepancy between the width between two of these, but when fixed everything still jumps.

There are no images on the side that are causing it to jump by being slow to load.

The content only jumps if the content is greater than the screen height- that is, it goes off screen.

Content will jump with my old computer, but will not jump with my new computer, on the same network and connection.

On an older computer content will jump with IE 10, but not when you put IE10 into compatibility mode.

I'm afraid that i don't have the permission to put a link to the website, so i've tried to put everything i know about it here. I know that makes it more difficult, but any pointers to put me in the right direction will help a lot!

Update!

The scroll bars were the problem- I used the answer from this thread: Making the main scrollbar always visible

and all jumping has stopped!

Upvotes: 2

Views: 3986

Answers (1)

aalku
aalku

Reputation: 2878

You should simplify the problem removing 'things' until you isolate it.

If you don't have a preproduction or development environment to test make a copy of the page where the problem still exists. Then start removing things. If any div needs some content so the layout is stable replace anything dynamic or complex with simple text or images.

If the problem seems fixed removing something don't think you got it, undo what you just did so it still fails and keep on removing parts or functions that definitely have nothing to do with the problem. When you have a minimal example that is still failing it will be much easier to figure out what the problem is or if not post the example here so we can help.

Upvotes: 4

Related Questions