Skip to content

[css-overflow] Is it necessary to support nested scrollers for html and body? #5403

@george-steel

Description

@george-steel

Moved from https://crbug.com/580570 (2016):

The CSS spec says that "html { overflow: scroll; }" and "body { overflow: scroll; }" are equivalent - in both cases you're just setting the scrolling mode of the viewport. But "html, body { overflow: scroll; }" is special - in that case body actually get's its own scrolling box independent from the viewport.

This is widely supported, but can be a little confusing. Let's explore whether this behavior is really necessary for web compatibility. We could potentially simplify things by saying that overflow applied to body ALWAYS applies to the viewport.

This is currently the case in css-overflow-3 which says that

UAs must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has a body element as a child, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible.

This further clarified in cssom-view and is the current behavior in both chrome and firefox as confirmed by https://codepen.io/george-steel/pen/mdPdQgw, which produces two sets of scrollbars.

Is there any use for this behavior, or should be simplified?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions