New LV project gets "Layout was forced before the page was fully loaded" warning on Firefox

sezaru commented 1 month ago

Environment

Elixir version (elixir -v): 1.17.2
Phoenix version (mix deps): 1.7.14
Phoenix LiveView version (mix deps): 1.0.0-rc.6
Operating system: Fedora Silverblue 41
Browsers you attempted to reproduce this bug on (the more the merrier): Firefox 130.0.1
Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: no

Actual behavior

On Firefox, when you load a LV page, it will generate the following warning in the console:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. markup.js:250:53

This means that the html is being rendered before the CSS is loaded, meaning that all texts, images, svgs, etc will be rendered for a split second without any style and then the style will be applied.

This video shows that happening when I refresh the page:

953f5691e4445181bc8a5e4723d148d71ba906f7

This happens in all my Phoenix LV projects, but just to make sure that is nothing that I'm doing, I also tested in a brand new Phoenix project where I just added a route with a LV with this render function:

  def render(assigns) do
    ~H"""
    <svg
      class="size-10"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 20 20"
    >
      <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
    </svg>
    """
  end

Expected behavior

This warning shouldn't be happening and the page elements shouldn't be showing without styles when the page loads.

sezaru commented 1 month ago

Just for completeness:

This warning don't happen in Chrome, but I do think the flicker happens in Chrome as-well, it is just way harder to trigger it.

In Chrome I do actually see another issue that I'm not sure it is related to this or note, so I will comment here just in case it is: Sometimes, if I leave a tab open for a long time in the background with my project running, when I go back to that tab, the server will respond with a 404 for both the css and js requests and render the full page without any style or js at all. The only way to fix that is to reload the page. It just happened right now so I have a screenshot of it to show:

I'm not sure if this is something more related to our instance in AWS not accepting these requests or something else, but I think I remember seeing that happen when I ran my local instance too, not 100% sure.

Either way, it is probably a separated issue...

Also, a good way to see the issue in Firefox, is just to hold the CTRL+F5 buttons, that way the page will be refreshing in a loop and will show the page without style all the time.

begedin commented 1 month ago

Did some testing here. With any or all of these changes done, I still get that message

removing all script and link tags from the html
moving all js code into document.addEventListener('DOMContentLoaded')
fully emptying out the root layout so that nothing is rendered
removing lide reload
removing component annotations and expensive runtime checks

Yes, if I add a styled div to the live view render functions and with no other changes, rapid refreshing will show the style is "flashing in".

However, even with a blank html document, the message is still there.

So these two problems are possibly two conceptually related, but separate things.

EDIT: To add, I see the message on the default dead view as well. EDIT2: Removing defer from the app.js script tag eliminates the style flash for me, but not the message. Of course, i then get a blank page until the script is fully loaded.

leifmetcalf commented 1 week ago

I think the message from Firefox is just a bug in the dev tools inspector: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468. I get the 'Layout was forced...' message with just html/css:

index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    Hello, World!
  </body>
</html>

(where app.css is an empty file). Removing the <link> tag gets rid of the error message as expected.

bGuirra commented 1 week ago

It's happening to me too, but I think it's a problem in Firefox. I can't reproduce it in Chrome.

nmorajda commented 4 days ago

I noticed that every page loading a stylesheet in the traditional way triggered the "Layout was forced..." warning in the Firefox developer tools. After trying various solutions, I found that using this code effectively removed the warning:

    <link rel="preload" href="/user/themes/orca/css/custom.css" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/user/themes/orca/css/custom.css"></noscript>

This workaround ensures the stylesheet loads without prompting the warning, likely due to how Firefox handles CSS loading and layout rendering.

sezaru commented 4 days ago

That does remove the warning, but the page still renders first without the styles applied for a split second unfortunately

phoenixframework / phoenix_live_view