Skip to content
This repository has been archived by the owner on Jul 30, 2022. It is now read-only.

Firefox FOUC #376

Open
Kule02 opened this issue Sep 20, 2020 · 2 comments
Open

Firefox FOUC #376

Kule02 opened this issue Sep 20, 2020 · 2 comments

Comments

@Kule02
Copy link

Kule02 commented Sep 20, 2020

Setup

  • Browsers and versions: Firefox 80.0.1 x64 win 10
  • MediaWiki version: 1.34.2
  • Database version: MySQL 5.6.43
  • PHP version: 7.3.6
  • Foreground version: 2.3.0
  • Extension version (if connected to the issue):

Issue

I've recorded the issue and it can be viewed here.

I first noticed the issue when setting up Foreground on my own wiki, and testing the wiki in both Chrome and Edge doesn't produce the issue, no matter how many times I refresh the page or wipe the cache. It seems to happen most on the Category and Special pages links, although it does sometimes show up when clicking or normal page links.

I'm on a 4G modem connection, which could have something to do with it, but as I said, Chrome and Edge don't have this problem. Sorry if this is a Firefox issue, but I haven't noticed any FOUC problems before with other websites.
@Kule02
Copy link
Author

Kule02 commented Oct 10, 2020 •
edited
Loading

I'm kind of learning as I'm going so I'm probably doing something which isn't the best way of solving it, but I've found a work-around fix for the constant flash of unstyled content issue I had on my wiki and which is also happening on other wikis using the Foreground skin and many other websites, including even github. It must be a Firefox bug as I could never replicate it with Chrome or Edge.

I took the solution from the bottom of this website: https://petrey.co/2017/05/the-most-effective-way-to-avoid-the-fouc/

I added the following code to the top of Foreground.skin.php:

<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>

And then I added the next piece of code to the bottom of foreground.css:

html {
visibility: visible;
opacity: 1;
}

I've been testing it for awhile now and I haven't seen a single FOUC. I have noticed that where a FOUC would have triggered before, now instead of the html text displaying, the top navbar will disappear for a split second before reappearing. It happens so quick that if you weren't looking for it you probably wouldn't notice it, so I don't mind and I can live with that. Also I asked friends to test my wiki and none of them experienced a FOUC with the original settings on a high speed cable/fibre line. I'm using 4g and I think that's where the issue comes from, but it's still strange that Chrome and Edge seem to have a way of dealing with the lower speed.

Anyway, sorry if this is obvious info or there's a much better way of dealing with this issue. I'm a novice with this stuff.

@kghbln
Copy link
Contributor

kghbln commented Oct 26, 2021

I have just upgrade to Foreground 2.4.0 and MediaWiki 1.35.x and I am getting FOUC sometimes on special pages, gladly not on regular pages when using Firefox. Not tested Chrome.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kghbln @Kule02