Closed kevincox closed 4 years ago
Your problem is caused by the dark backdrop that is only displayed on mobile devices and the fact that you are inserting the widget in a positioned element. To fix this, you need to set the z-index
to 21000000
(which is the actual z-index
for the widget) for the top-most parent element that has a position
set (header
in your example)
To fix this, you need to set the
z-index
to21000000
(which is the actualz-index
for the widget) for the top-most parent element that has aposition
set (header
in your example)
Never considered that. Nice solution!
However, as you say, if it's not inserted in a positioned element, then the widget can position itself where it needs to go. Probably also worth considering.
We should probably document this a bit better, so that it's not a surprise to developers. And if anyone has ideas for how to improve the widget CSS, bring 'em on! :)
That definitely needs to be documented if that is a requirement.
Other than that for the case of going full screen (as is done on narrow devices) does it make sense to just attach to the body element? This allows the user more flexibility when placing the widget and provides a more predictable environment for the widget itself.
I also realized that this can be worked around by passing the modalBackdrop: false
option.
This is the same as https://github.com/remotestorage/remotestorage-widget/issues/110
z-index is ignored for position: static elements.
It appears that the widget is unusable on narrow devices. When I open the widget to log in the entire screen has a grey overlay and any click just closes the widget. For example I tried multiple browsers on my phone and had the same issue. Turning the device to landscape allows logging in.
Example: https://5e8e65455ca10c42abc9015d--recipes-kevincox.netlify.com/
Interestingly this appears to be based on the load width. For example if I open the phone in portrait, then rotate, then touch the widget it is broken. If I load in landscape then turn it is fine.
I have reproduced on multiple browsers and on desktop. On desktop firefox the magic number appears to be between 419px (broken) and 422px (ok). So probably at 420px. This seems to correspond with the decision to make the widget full-width vs a "popup".