Better hiding of iframe about phoenix_live_reload HOT 12 CLOSED

For those finding this and use Tailwind, this fixed it for me:

# config/dev.exs
config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    iframe_attrs: [style: "display: none"],   # <-- add this
    patterns: [...]
  ]

-- EDIT, adjusted to use style attribute instead of Tailwind class to avoid needing to configure PurgeCSS

from phoenix_live_reload.

v1.3.1 is out!

from phoenix_live_reload.

If you want to actually customize it to something else, style makes it impossible, which is why we removed it.

from phoenix_live_reload.

If your css classes are overriding it, then the best is to use CSS to override it again. The issue with using style is that it doesn’t work with CSP, so it is bound to have pitfalls there too. In any case, I learned about hidden’s fragility, so this is good to know. Thank you!

from phoenix_live_reload.

Is there any drawback of using both style="display: none" and hidden as default?

from phoenix_live_reload.

For Tailwind, if you're using the new JIT compiler the above solution posted by @dbernheisel no longer works out of the box.

You also need to add the config file paths to PurgeCSS, such as:

  purge: [
    '/app/assets/**/*.js',
    '/app/config/**/*.exs',
    '/app/lib/hello_web/**/*.eex',
    '/app/lib/hello_web/**/*.leex'
  ]

from phoenix_live_reload.

Good point. Or alternatively define a rule directly in your css and don't depend on Tailwind for this particular case!

from phoenix_live_reload.

It looks like another alternative solution is to put width="0" height="0" on the iframe itself. Any chance of this getting re-opened and evaluated as a fix because then it requires no app level custom CSS in every project to workaround this issue.

I've tested it on Windows Chrome, FireFox and Edge and it works.

The idea was taken from the Elixir Forums here: https://elixirforum.com/t/does-anyone-know-why-phoenixs-live-reload-hidden-iframe-is-set-to-be-visible-in-the-dom-by-default/38900/6

from phoenix_live_reload.

@nickjj can you please send a PR? It would be very welcome!

from phoenix_live_reload.

Actually, I will go ahead and do it and ship a new release right now, since I have some before bed time. :)

from phoenix_live_reload.

Are you sure? I'm ok with opening the PR. This isn't a life or death request haha.

The only concern is I haven't tested this on macOS, Safari or other devices (lack of devices).

from phoenix_live_reload.

For future reference here is the commit: 13938e9

from phoenix_live_reload.