search

plausible / analytics

Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
https://plausible.io
GNU Affero General Public License v3.0
18.99k stars 1.02k forks source link

Embedded dashboard modals do not respect scroll depth #1363

Open ukutaht opened 2 years ago

ukutaht commented 2 years ago

Past Issues Searched

Issue is a Bug Report

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:

Screenshot from 2021-09-29 18-01-50

Environment

OS: Elementary
Browser: Firefox
tyler-morales commented 2 years ago

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 commented 2 years ago
  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 commented 2 years ago

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 commented 2 years ago

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

ukutaht commented 2 years ago

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

metmarkosaric commented 2 years ago

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.