On loading everything breaks for a sec CSS & HTML

Question

I've just finished my website and I've discovered that when my website loads on mobile it shows me the "display text" format plus the responsive menu flashes(opens) for a sec and then the site fully loads.

CSS file linked in the head
JS files at the bottom
It shows me div's set to display: none; in CSS on mobile for sec

I've tried to capture a screenshot:

I'm trying to figure out whats wrong hours now without success.

Any ideas?

Thank you

Are you using a cache plugin? The issue is wordpress related, not just css. — Federica Venuto, Jun 29 '20 at 10:13
Is the `display: none;` set in the JavaScript? If so, it may be displaying before the JS has a chance to parse. — Tyler Smith, Jun 29 '20 at 10:18
@FedericaVenuto Thanks for the reply I don't use a cache plugin. What you see is because I'm logged in. Here is without: [link](https://i.imgur.com/0rzA6K4.png) — trunks, Jun 29 '20 at 10:21
@TylerSmith Thanks for the reply. No `display: none; ` is set in the CSS. — trunks, Jun 29 '20 at 10:22

geauser · Answer 1 · 2020-06-29T10:34:31.523

1

This looks like a Flash Of Unstyled Content. Your Javascript takes more time to load than your CSS and your page is displayed before the Javascript has the time to hide stuff.

You could either put the Javascript in the <head>.
Use default styling in the CSS that would later be override by Javascript. As stated by @TylerSmith in the comments, if you want your panel to be hidden in the first place, use display: none in the CSS.
Show a loading screen until the load event of the window is triggered.

edited Jun 29 '20 at 10:34

answered Jun 29 '20 at 10:22

geauser

1,005
8
20

1

I also think that this is the problem. I just want to note a loader screen would be a possible solution here. – Wimanicesir Jun 29 '20 at 10:31
I dont think is a JS problem as the issue also occurs when js files are not embedded. I'm using `display: none` in the CSS file. – trunks Jun 29 '20 at 10:48
How is your CSS linked? @trunks It could be that your stylesheet being a little bit, takes a little while to load letting the browser display elements with their default styles. – geauser Jun 29 '20 at 10:50

score 0 · Accepted Answer · answered Jun 29 '20 at 16:44

After searching and removing code piece by piece, I've found a function that disables wp_emojicons that for some reason it makes the CSS to load late.

function disable_wp_emojicons() {

/* all actions related to emojis */
  remove_action( 'admin_print_styles', 'print_emoji_styles' );
  remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  remove_action( 'wp_print_styles', 'print_emoji_styles' );
  remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
  remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
  remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );

/* filter to remove TinyMCE emojis */
  add_filter( 'tiny_mce_plugins', 'disable_emojicons_tinymce' );
}

On loading everything breaks for a sec CSS & HTML

2 Answers2