Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
sezaru opened this issue Sep 26, 2024 · 7 comments
Open

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

sezaru opened this issue Sep 26, 2024 · 7 comments

Comments

@sezaru
Copy link
Contributor

sezaru commented Sep 26, 2024

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
Copy link
Contributor Author

sezaru commented Sep 26, 2024

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:
image

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
Copy link
Contributor

begedin commented Sep 28, 2024 •
edited
Loading

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
Copy link

leifmetcalf commented Nov 7, 2024 •
edited
Loading

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
Copy link

bGuirra commented Nov 7, 2024

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

@nmorajda
Copy link

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
Copy link
Contributor Author

sezaru commented Nov 10, 2024

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

@suciptoid
Copy link

In my case, it only happen when devtool is open.

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

No branches or pull requests
6 participants
@sezaru @suciptoid @begedin @leifmetcalf @nmorajda @bGuirra