If you have Chrome on mac, can you try this for me?
https://donations.speakernet.co.uk/
Go to this simple payment page, and scroll UP with a mouse wheel. On Firefox, the header stays pinned to the top and the content slides underneath. On chrome, once you reach the bottom of the scroll, the page starts to slip off the top.
The same on scrolling down, once you reach the end, the header starts to get dragged down and is no longer fixed to the top of the screen.
I'm trying to establish if this is my machine or more generally an issue.
The page is designed with Tailwind and has fixed applied to the header which gives it position absolute.
It looks ok here (chrome, osx). No strange effects.
I too had issues a few times with chrome acting strange with fixed elements on a local machine only. After closing my browser and opening it up again it was "fixed". I was never able to figure out what caused it.
The only thing that scrolls for me is the white box. It hides itself a little behind the header.
It seemd to be the min-h-screentogether with the sticky header that causes it.
That one seems the have this CSS
.min-h-screen {
min-height: 100vh;
}
I changed it to
.min-h-screen {
min-height: 93.3vh;
}
Then the scrolling disappeared. However that was just for mine resolution and window size.
Why not set the body background to the same color instead of the div?
Its mimicking the main site which is written in Bootstrap
The page does get longer as the payment form is revealed.
This is what I mean
Yes, thats the fixed header. If you make your browser vertically shorter then of course the scrolling makes more sense (or compare to https://speakernet.co.uk)
@snapey The elastic scrolling? Chrome’s always had that.
I've had a forced reboot earlier this afternoon and now its not doing it...
It was not just my sites, it was also happening with my Freeagent accounts package and a few others.
I don't know it will help but with tailwind fixed class is tricky. try like this
<div class="h-screen overflow-y-auto fixed top-0">
<span class="flex sticky top-0 z-10 ">
<p>Acount Informations</p> <==== sticky part
</span>
<div class=" overflow-y-auto h-full">
<slot /> <========= scrollable part
</div>
</div>
it's already working as sticky header
Please or to participate in this conversation.