Description
Describe the bug
In order to calculate dynamic resize, Svelte uses an iframe and adds inline style properties on it.
Among those, a calculated z-index, that gets the iframe on top of every other items inside the binded dom element.
if binded element has a computed z-index, iframe will be set to that z-index - 1
(I'm not sure why is that - I am probably missing something ^^)
This seems weird to have a correlation between parent and children z-indexes.
In the end we have something like this :
holder : z-index: 3
|- element : z-index: auto
|- element : z-index: auto
|- iframe : z-index: 2
No matter what z-index is on the holder, a positive z-index on the iframe will always be above auto ones
Note that among those added inline styles, there is also a pointer-events set to none, which prevent problems when iframe comes on top, but it seems ios12 and below doesn't support pointer-events on iframes.
Logs
Happens everywhere but really is problematic on chrome/safari ios12
To Reproduce
Visible on this repl :
https://svelte.dev/repl/7e5a4ca7dccc498fa067300d7ed9fff0?version=3.24.0
Expected behavior
Iframe not above anything.
Maybe a fix z-index: -1 would do it - that's how it was fixed on the project I'm working on
Information about your Svelte project:
- Svelte version 3.24.0 / Webpacked
Severity
Blocking ios12 and below users (3 to 5% here)