Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use fixed positioning for .banner #309

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Use fixed positioning for .banner #309

wants to merge 1 commit into from

Conversation

p8
Copy link
Member

@p8 p8 commented Sep 25, 2023

Prevent the banner from moving under the .panel__tray when overscrolling the top (similar to pull to refresh):

image

Prevent the banner from moving relative to the .panel__tray when
overscrolling.
@jonathanhefner
Copy link
Member

I am having trouble recreating the issue. I tried with both https://edgeapi.rubyonrails.org/ and https://deploy-preview-308--sdoc.netlify.app/ (the most recent preview for main) using Safari on iOS.

What is your setup like?

@p8
Copy link
Member Author

p8 commented Sep 28, 2023

@jonathanhefner I'm on OSX. This happens with Firefox and Chrome. Safari handles it properly.
out

@jonathanhefner
Copy link
Member

I'm on OSX. This happens with Firefox and Chrome. Safari handles it properly.

Hmm, that is tricky. On Linux, Firefox and Chrome don't natively support overscroll. I can configure Firefox to support overscroll by setting apz.overscroll.enabled to true in about:config, but I still can't reproduce the issue, so something must be missing. And I haven't found a way to configure Chrome to support overscroll.

As you probably noticed in the preview, setting position: fixed removes .banner from the flow, causing other layout issues.

Shot in the dark: instead of adding position: fixed to .banner, if you add top: var(--banner-height) to .panel__tray does the issue still occur?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants