"scroll-snap-type: y mandatory" has invisible margins in Safari

user_9428919 0
Viewed 589

Safari screenshot

So I have been trying to make sections stick to the top of the screen while scrolling.

I have used scroll-snap-type: y mandatory; for the html and body elements and scroll-snap-align: start; for the children (sections) elements.

This works as expected on Chrome (both Windows 10 and MacOS Big Sur) and Edge, but does not work correctly on Safari. On Safari the scroll goes a couple of hundred pixels too far, cropping the top of the desired sections and making the beginning of the next sections visible. The gap seems to grow bigger each section. I have already tried:

scroll-padding-top: 0;
scroll-padding-bottom: 0;

on parents, and

scroll-snap-margin-top:0;
scroll-snap-margin-bottom:0;

on children.

None of the margin/padding values seem to improve the results (some of them go as far as making the gap bigger or breaking the scroll completely).

scroll-snap-type: y proximity; works as expected, but it is not the effect I am after.

scroll-snap safari scroll css html
2 Answers
user_154358250

I had the same problem.

Using the -webkit prefix solved the problem to me while scrolling down.

On the parent (body and html)

-webkit-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;

on children

-webkit-scroll-snap-align: start;
scroll-snap-align: start;

But no matter how far you've scrolled down, every time scrolling up is triggered it scrolls up to the top of the body, not as expected to the previous neighbour.

user_122200390
Related