FOUC and flickering

[clecap]

The skin shows flickering on navigation which is typical of FOUC (flash of unstyled content).

More particularly: The footer first shows in the middle of the page and then, after a short period of time, is pushed further down. It looks like the style sheet containing the relevant information for the footer position is loaded too late.

I see the effect on a 1.38.0 MediaWiki, build b135467, and a 4.1.0 Chameleon skin on a high-end workstation.

In the old, classical vector skin I do not have this problem.

I suspect that this is due to a problem with the MW resource loader, which often causes similar problems.

I further suspect that this is caused by the Bootstrap extension using the MW resource loader.

[malberts]

A few questions:

• Have you noticed this behaviour on any other combinations of Mediawiki and Chameleon?
• Which Chameleon layout (or custom XML) are you using?
• Do you have custom SCSS defined for Chameleon?
• Do you have custom CSS defined on the wiki?

The footer first shows in the middle of the page and then, after a short period of time, is pushed further down.

Does this mean the page content is missing initially and then once it is styled the footer is pushed down? Or is the footer on top of the content initially?

[clecap]

I have not tried other combinations and therefore I have not noticed any additional situations.

I did not use any custom layout, SCCS, or CSS. I downloaded Mediawiki, installed it, installed chameleon via composer, had no other packages or extensions loaded, made a single page in addition to the main page, provided a one line text to this page, switched the user preference to chameleon skin and made the screen video I sent to you. In this sense, my situation is a minimal non-working situation.

One can see it quite nicely in the screen video.

At 0:04 the page Dab first renders correctly, then the footer moves up and immediately afterward moves down again.

The same effect can be seen at 0:08 with the Main Page. First the page is rendered correctly. Then the footer moves up and then down again.

At 0:10 you have that effect again with the page Dab.

I rechecked it once again and can reproduce the effect you see in the screen video.

[clecap]

I do not see the screen video attached here ?! WIll attach it to this message.

flickering-of-chameleon-skin.mov

It is helpful do download and play around with the slider of a video player. On the embedded player in github it is a bit difficult to see due to the resolution of the timeline.