search

remotestorage / remotestorage-widget

⬡ Connect widget for remoteStorage.js
https://remotestorage.io
28 stars 16 forks source link

Buggy on narrow devices. #109

Closed kevincox closed 4 years ago

kevincox commented 4 years ago

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/

image

image

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".

iLiviu commented 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)

raucao commented 4 years ago

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)

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! :)

kevincox commented 4 years ago

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.

kevincox commented 4 years ago

I also realized that this can be worked around by passing the modalBackdrop: false option.

ProggerPete commented 4 years ago

This is the same as https://github.com/remotestorage/remotestorage-widget/issues/110

z-index is ignored for position: static elements.