Web Wish 8: End Side Padding on Scroll Containers

One of the longest-running issues I've followed is how to handle padding in a scroll container. The issue was first opened in 2016.

Most developers expected padding to be added at the end of the in-flow content of the scroll container. This was also how it was specified in Overflow 3.

However, browsers handled this differently, and it wasn't clear if the desired behavior was web-compatible. Inline padding was particularly problematic, as all browsers agreed on excluding it. Changing this could cause web-compat issues as pages could rely on the current behavior.

It was a mess.

But slowly and steadily, the issues were worked out.

In 2019 the working group resolved to always include padding in grid and flexbox containers, as there were no web-compat issues there.

Then, Blink finally ironed out the last web-compat issues, and in 2022, the working group resolved to always include inline-end padding.

Firefox has just begun passing all the tests, and while Safari is not fully compliant yet, the situation has improved significantly.

Or, so I thought.

It turns out that IntersectionObserver in Safari doesn't support padding on the scroll container correctly. While padding is now usable on scroll containers in many cases, any IntersectionObservers that use the scroll container as root may behave erratically.

So, this Christmas I'm wishing for Safari to support padding correctly in IntersectionObservers.

Relevant issues and PRs:

• Include padding in scrollable overflow area
• Clarify padding in overflow content
• Clarify root rect with overflow and padding
• IntersectionObserver root rect with padding is incorrect if there's overflow clipping