Skip to content

Propagate body overflow to the viewport - #716

Open
nicoburns wants to merge 2 commits into
mainfrom
devin/1786672172-body-overflow-propagation
Open

Propagate body overflow to the viewport#716
nicoburns wants to merge 2 commits into
mainfrom
devin/1786672172-body-overflow-propagation

Conversation

@nicoburns

@nicoburns nicoburns commented Aug 14, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

Summary

Per CSS overflow propagation, when the root element's overflow is visible, the <body>'s overflow is propagated to the viewport and the body's used overflow is visible — it must not become a scroll container or clip its own content. Blitz previously only special-cased the root element, so body { overflow: hidden } made the body itself a clipping scroll container, breaking e.g. percentage max-height resolution in flexbox-definite-sizes-003/004.

Changes:

  • BaseDocument::viewport_overflow_propagation_source() — returns the element whose overflow is propagated to the viewport: the root element if its overflow is non-visible, otherwise the <body>. Any containment (contain != none) on the root or the body suppresses propagation entirely (per css-contain-2; covers css/css-contain/contain-{body,html}-overflow-*).
  • flush_styles_to_layout resets that element's Taffy overflow to Visible (and scrollbar_width to 0) after style flush, so layout treats it as non-scrollable.
  • blitz-paint's clip logic keys clipping suppression off the propagation source instead of unconditionally exempting the root element (a contained root now clips its own overflow, e.g. contain-html-overflow-002).

WPT results (release runner):

  • css/css-flexbox: 805 → 807 passing (flexbox-definite-sizes-003/004 fixed), no regressions.
  • css/css-overflow: +5 (overflow-body-propagation-007/008/009/016, scrollable-overflow-with-nested-elements-005), no regressions.
  • css/css-contain: contain-body-overflow-003/004 and contain-html-overflow-001..004 kept passing via the containment exception (contain-body-overflow-002 and contain-layout-ink-overflow-013/015 fail on main too).

Link to Devin session: https://dioxus.staging.devinenterprise.com/sessions/17cea825d78643e298cf44b2ef9f6680
Requested by: @nicoburns

WPT results

28 newly passing, 7 newly failing (net +21).

Full diff (35 changed tests) 
+ Fail => Pass css/CSS2/visufx/overflow-propagation-001a.html
+ Fail => Pass css/css-backgrounds/background-origin/origin-border-box.html
- Pass => Fail css/css-backgrounds/background-origin/origin-border-box_with_position.html
+ Fail => Pass css/css-backgrounds/background-origin/origin-border-box_with_radius.html
+ Fail => Pass css/css-backgrounds/background-origin/origin-border-box_with_size.html
+ Fail => Pass css/css-backgrounds/border-radius-clipping-002.html
+ Fail => Pass css/css-contain/contain-size-grid-002.html
+ Fail => Pass css/css-flexbox/flexbox-definite-sizes-003.html
+ Fail => Pass css/css-flexbox/flexbox-definite-sizes-004.html
+ Fail => Pass css/css-grid/grid-items/aspect-ratio-005.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html
- Pass => Fail css/css-images/image-orientation/image-orientation-img-object-fit.html
+ Fail => Pass css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html
+ Fail => Pass css/css-masking/clip-path/clip-path-scaled-video.html
+ Fail => Pass css/css-overflow/overflow-body-propagation-007.html
+ Fail => Pass css/css-overflow/overflow-body-propagation-008.html
+ Fail => Pass css/css-overflow/overflow-body-propagation-009.html
+ Fail => Pass css/css-overflow/overflow-body-propagation-016.html
+ Fail => Pass css/css-overflow/scrollable-overflow-with-nested-elements-005.html
- Pass => Fail css/css-pseudo/first-letter-width-2.html
- Pass => Fail css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000.html
- Pass => Fail css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html
+ Fail => Pass css/css-transforms/transform-fixed-bg-006.html
+ Fail => Pass css/css-transforms/transform-inherit-001.html
+ Fail => Pass css/css-transforms/transform-transformed-td-contains-fixed-position.html
+ Fail => Pass css/css-transforms/transform-transformed-th-contains-fixed-position.html
- Pass => Fail css/cssom-view/cssom-getBoundingClientRect-vertical-rl.html
- Pass => Fail css/filter-effects/backdrop-filter-plus-mask-large.html

Generated by the WPT workflow.

@staging-devin-ai-integration

staging-devin-ai-integration Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@nicoburns nicoburns

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@nicoburns