Search code examples
cssbuttonheaderloading

Element style only appears after page loads up

I have a header with a navigation menu inside. A couple of the menu links of the navigation menu are styled as buttons. For some reason the styling of the buttons only appears after the page loads up.

Screen recording: https://streamable.com/k5fhmh

Every time the page loads up the buttons do this "animation" and I can't figure out what's causing it.

What might be causing this?

I would like the style of the buttons to appear right away, with no animation or delay.

Solution

  • It seems that the style to the buttons are added by a process which is still loading after the page has loaded. But I had this by an intended css delay effect of a used module as well.

    You may check:

    1. Are all styles (even the styles for the buttons) included to the one main css file and not imported in a secondary stylesheet file.
    2. Make sure that the stylesheet file with the button styles is loaded first (= first of all css files and before first JS script is called). It should be the first file in head which is noted to be loaded.
    3. If the button styles are in a secondary stylesheet move them to the primary loaded one.
    4. Are the classes of the buttons fix set in the html file (i.e. = <a class='button stylingClass" href="...">Get Started</a>) and not added afterwards i.e. by JS and/or by an external module.
    5. Are the buttons html fix set in the html file and not added afterwards i.e. by JS and/or by a external module.
    6. Are the styles for the buttons added by an animation or a transition with a delay i.e. to create additional attention. The styles should be set fixed without animation or transition-delays.
    7. Sometimes external used fonts causes rerenderings. You can check this if you deactivate the fonts and test the behavior.
    8. Make sure the background/content of the buttons is not styled by images which needs to load

    Additional Tipps for a workaround:

    (A) If it is caused by a module (i.e. the module adds the additional stylings) and you however cannot change the module loading process you are able to add the style ADDITIONAL to your main css file or write it to a style part in your <head>. That doubled code does not affect the working of your page.

    Example:

    
<head>

   <style>

      a.buttonClass {
         ... your button css ...
      }

   </style>

</head>

    (B) If it caused by a font you may like to have a look to this information:
    https://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/
    https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/