sezaru
Newly created Phoenix project get this "Layout was forced" warning in firefox
I noticed that I always get this warning when I run my Phoenix project in firefox:
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
I was not certain if that was because of something I did, so I created a new empty Phoenix project and added a liveview route to it and got the exact same warning.
The thing with this warning is that, because of it, some elements in the page can show before the css is loaded, so there is a possibility of a “flicker” when the page first loads.
This is very noticeable when you have SVGs in your page since they will render super big first and then, when the CSS is applied, will go back to the correct size.
The only way to workaround this issue that I found was to add this to my body element:
<body class="!opacity-100" style="opacity: 0;">
That way, the whole body is “invisible” until the CSS is loaded and applied.
But honestly, I would rather have this fixed instead of having to rely in an ugly workaround… Does anyone else knows what is happening here and what is the proper solution?
Edit:
Here is a quick video showing what happens when you add an svg with this issue:
Here is my LV 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
Most Liked
sodapopcan
Ohhhhh ha! That’s funny as I recognized your handle from here on GitHub, but here you’ve changed your avatar from that blue identicon and that’s all I looked at 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"