Embedded dashboard modals do not respect scroll depth

[ukutaht]

Past Issues Searched

• [X] I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• [X] This is a bug report and not a feature request, nor asking for self-hosted support

Describe the bug

When using an embedded dashboard on mobile, the details modals do not respect the scroll depth. Instead, they open at the top of the page and the user has to scroll to the top to see the details.

Expected behavior

Modals open where the user has scrolled to like on the hosted dashboard: https://plausible.io/plausible.io

Screenshots

User sees bottom of the modal when opening it:

Environment

OS: Elementary
Browser: Firefox

[tyler-morales]

I am unclear on this issue. When I checked whether or not I had to scroll to the top of the page when I opened a modal, I had no issues both on my phone and in the browser (500px).

[ukutaht]

1. Go to https://markosaric.com/stats/
2. Scroll down to 'countries'
3. Click 'details'

What I see is that the modal opens above the actual viewport so you need to scroll up to see it. This is unlike our dashboard https://plausible.io/plausible.io where it follows the user's scroll position.

[chrisbennett-Bene]

I noticed a similar thing when testing Plausible for the first time yesterday, re: iframe embeds.

Something about the iframe resizer, combined with all the other stuff like scroll="no" etc, kept throwing modal content to the top. So modal content was effectively off screen, even on 1920x1080. Details for Location, for example, was completely hidden apart from the modal overlay.

Fortunately, for the embeds, removing <script async src="https://plausible.io/js/embed.host.js"></script> resulted in behavior way more consistent with the non-embedded behavior.

Simplifying the embed link along these lines made it behave as expected:

Issue with simplified embed

There is an issue with the simplified embed approach that if you open a modal then use the iframe scrollbar, like many would, rather than arrow key, scroll-wheel or touch, then the modal is dismissed.

Swings and roundabouts I guess. Not ideal, but imo for the moment better than a seemingly blank modal overlay.

[ukutaht]

Thanks for the information @chrisbennett-Bene! This will be useful when we get around to improving this

[ukutaht]

More reading: https://github.com/davidjbradshaw/iframe-resizer/issues/260

[metmarkosaric]

Not sure if related, but we've got a report that the embedded dashboard doesn't allow to scroll all the way to the top of Pages Details view. Reported from iPhone 12 Pro. Screencast below:

https://user-images.githubusercontent.com/34340819/161432828-8b8f95da-5d50-435e-a2fc-47aaa2eb65a5.mp4

I checked on my laptop and my Android mobile and there it works all fine.