Implement non-overlay mode for ::overscroll-area-parent [chromium/src : main]

0 views
Skip to first unread message

Robert Flack (Gerrit)

unread,
Feb 5, 2026, 4:50:44 PM (8 days ago) Feb 5
to Philip Rogers, Menard, Alexis, chromium...@chromium.org, apavlo...@chromium.org, blink-re...@chromium.org, blink-re...@chromium.org, blink-rev...@chromium.org, blink-revi...@chromium.org, blink-rev...@chromium.org, blink-rev...@chromium.org, blink-...@chromium.org, zol...@webkit.org
Attention needed from Philip Rogers

Robert Flack added 2 comments

Patchset-level comments
File-level comment, Patchset 3 (Latest):
Robert Flack . resolved

Hey Philip, I think I need some guidance on how best to add support for entering multiple scroll translation transforms when we start the scrolling contents. In particular, you can see the ScrollTranslation for the content is inside the ScrollTranslation for the `::overscroll-area-parent` and we end up trying to switch directly to that context for the chunk.

File third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.cc
Line 987, Patchset 3 (Latest): return {};
Robert Flack . unresolved

@p...@chromium.org How can we enter multiple scroll translations for a single chunk? The comment above implies that we should call this for each level but that's not happening with the current logic when entering a non-overlay scrollable area inside of multiple `::overscroll-area-parent` pseudos.

Test page:
```html
<!DOCTYPE html>
<style>
  #container {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: auto;
    padding: 16px;
    padding-right: 32px;
    box-sizing: border-box;
  }
  #dismiss {
    width: 500%;
    height: 500%;
    /* Overflows each edge by 100%. */
    top: -200%;
    left: -200%;
    box-sizing: border-box;
    background: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7));
    pointer-events: none;
  }
</style>
<div id="container" overscrollcontainer>
  <div id="dismiss"></div>
  <div id="content">
    <h2>Content</h2>
    <p>This is the content area.</p>
    <p>There is a dismissable area that can be swiped to from any edge.</p>
    <p>You can also scroll the content down...</p>
    <p>to view the rest of this text.</p>
  </div>
</div>
<button id=button command="toggle-overscroll" commandfor="dismiss">Dismiss</button>
<button id=button2 command="toggle-overscroll" commandfor="dismiss">Dismiss</button>
```
The resulting property trees and paint chunks are as follows:
```
[3431098:3431098:0205/202337.267305:INFO:third_party/blink/renderer/core/paint/paint_property_tree_printer.cc:230] Transform tree:
root 0xa3c004316a0 {"flattensInheritedTransform":false,"in_subtree_of_page_scale":false,"scroll":"0xa3c004317a8"}
  VisualViewport Scale Node 0xa3c00563fd0 {"changed":"node-add-remove","flattensInheritedTransform":false,"in_subtree_of_page_scale":false,"directCompositingReasons":"Viewport","compositorElementId":"(576)"}
    VisualViewport Translate Node 0xa3c005641c8 {"changed":"node-add-remove","flattensInheritedTransform":false,"directCompositingReasons":"Viewport","scroll":"0xa3c005640d8"}
      PaintOffsetTranslation (LayoutView #document) 0xa3c005642d0 {"changed":"node-add-remove"}
        ScrollTranslation (LayoutView #document) 0xa3c00564598 {"changed":"node-add-remove","directCompositingReasons":"RootScroller","scroll":"0xa3c005644a8"}
          PaintOffsetTranslation (LayoutBlockFlow DIV id='container') 0xa3c005646a0 {"changed":"node-add-remove","translation2d":"[8 8]"}
            PaintOffsetTranslation (LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent) 0xa3c00564a70 {"changed":"node-add-remove","translation2d":"[1 1]"}
              ScrollTranslation (LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent) 0xa3c00564d38 {"changed":"node-add-remove","translation2d":"[-366 -396]","scroll":"0xa3c00564c48"}
                ScrollTranslation (LayoutBlockFlow DIV id='container') 0xa3c00564968 {"changed":"node-add-remove","scroll":"0xa3c00564878"}
[3431098:3431098:0205/202337.287213:INFO:third_party/blink/renderer/core/paint/paint_property_tree_printer.cc:235] Clip tree:
root 0xa3c00431898 {"localTransformSpace":"0xa3c004316a0","rect":"-8.38861e+06,-8.38861e+06 1.67772e+07x1.67772e+07"}
  OverflowClip (LayoutView #document) 0xa3c005643d8 {"changed":"node-add-remove","localTransformSpace":"0xa3c005642d0","rect":"0,0 800x600"}
    OverflowClip (LayoutBlockFlow DIV id='container') 0xa3c005647a8 {"changed":"node-add-remove","localTransformSpace":"0xa3c005646a0","rect":"1,1 183x198"}
      OverflowClip (LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent) 0xa3c00564b78 {"changed":"node-add-remove","localTransformSpace":"0xa3c00564a70","rect":"0,0 183x198"}
[3431098:3431098:0205/202337.293982:INFO:third_party/blink/renderer/core/paint/paint_property_tree_printer.cc:239] Effect tree:
root 0xa3c00431600 {"localTransformSpace":"0xa3c004316a0","outputClip":"0xa3c00431898"}
  Caret 0xa3c00544e10 {"changed":"node-add-remove","localTransformSpace":"0xa3c004316a0","outputClip":"(nil)","opacity":0.00100000004749745,"directCompositingReasons":"ActiveOpacityAnimation","compositorElementId":"(138)"}
[3431098:3431098:0205/202337.299675:INFO:third_party/blink/renderer/core/paint/paint_property_tree_printer.cc:243] Scroll tree:
root 0xa3c004317a8 {"containerRect":"-8388608,-8388608 16777215x16777215","contentsRect":"-8388608,-8388608 16777215x16777215"}
  VisualViewport Scroll Node 0xa3c005640d8 {"changed":"node-add-remove","containerRect":"0,0 800x600","contentsRect":"0,0 800x600","userScrollable":"both","maxScrollOffsetAffectedByPageScale":"true","compositorElementId":"(580)"}
    Scroll (LayoutView #document) 0xa3c005644a8 {"changed":"node-add-remove","containerRect":"0,0 800x600","contentsRect":"0,0 800x600","overflowClipNode":"0xa3c005643d8","userScrollable":"both","compositorElementId":"(836)"}
      Scroll (LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent) 0xa3c00564c48 {"changed":"node-add-remove","containerRect":"0,0 183x198","contentsRect":"0,0 915x990","overflowClipNode":"0xa3c00564b78","userScrollable":"both","compositorElementId":"(1028)","snap_container_rect":"0,0 183x198","snap_area_rects":["366,396 183x198","0,0 915x990"]}
        Scroll (LayoutBlockFlow DIV id='container') 0xa3c00564878 {"changed":"node-add-remove","containerRect":"1,1 183x198","contentsRect":"1,1 183x363","overflowClipNode":"0xa3c005647a8","userScrollable":"both","compositorElementId":"(964)"}
[3431098:3431098:0205/202337.317354:VERBOSE1:third_party/blink/renderer/platform/graphics/paint/paint_controller.cc:852] PaintController::CommitNewDisplayItems() completed
[3431098:3431098:0205/202337.327462:INFO:third_party/blink/renderer/platform/graphics/paint/paint_controller_debug_data.cc:119] current paint artifact: [
  {
    "subsequence": "client: 0xa3c00520f50 LayoutView #document",
    "chunks": [
      {
        "chunk": "LayoutView #document 0xa3c00520e38:LayoutView #document:ScrollHitTest:0",
        "state": "t:0xa3c005642d0 c:0xa3c00431898 e:0xa3c00431600",
        "bounds": "0,0 800x600",
        "displayItems": []
      },
      {
        "chunk": "Scrolling background of LayoutView #document 0xa3c004a20b8:Scrolling background of LayoutView #document:DrawingDocumentBackground:0",
        "state": "t:0xa3c00564598 c:0xa3c005643d8 e:0xa3c00431600",
        "bounds": "0,0 800x600",
        "displayItems": [
          "0: 0xa3c004a20b8:Scrolling background of LayoutView #document:DrawingDocumentBackground:0",
          "1: 0xa3c005219f8:LayoutBlockFlow (inline, children-inline) BUTTON id='button':DrawingBoxDecorationBackground:0",
          "2: 0xa3c00521b38:LayoutText #text:DrawingPaintPhaseForeground:0",
          "3: 0xa3c00521ba8:LayoutText #text:DrawingPaintPhaseForeground:0",
          "4: 0xa3c00521c18:LayoutBlockFlow (inline, children-inline) BUTTON id='button2':DrawingBoxDecorationBackground:0",
          "5: 0xa3c00521cb8:LayoutText #text:DrawingPaintPhaseForeground:0"
        ]
      },
      {
        "subsequence": "client: 0xa3c005211d0 LayoutBlockFlow DIV id='container'",
        "chunks": [
          {
            "chunk": "LayoutBlockFlow DIV id='container' 0xa3c005211d0:LayoutBlockFlow DIV id='container':LayerChunk:0",
            "state": "t:0xa3c005646a0 c:0xa3c005643d8 e:0xa3c00431600",
            "bounds": "0,0 200x200",
            "displayItems": [
              "6: 0xa3c00521138:LayoutBlockFlow DIV id='container':DrawingBoxDecorationBackground:0"
            ]
          },
          {
            "chunk": "LayoutBlockFlow DIV id='container' 0xa3c00521138:LayoutBlockFlow DIV id='container':ScrollHitTest:0",
            "state": "t:0xa3c005646a0 c:0xa3c005643d8 e:0xa3c00431600",
            "bounds": "0,0 200x200",
            "displayItems": []
          },
          {
            "chunk": "VerticalScrollbar 0xa3c0055c340:VerticalScrollbar:ScrollbarVertical:0",
            "state": "t:0xa3c005646a0 c:0xa3c005643d8 e:0xa3c00431600",
            "bounds": "184,1 15x198",
            "displayItems": [
              "7: 0xa3c0055c340:VerticalScrollbar:ScrollbarVertical:0"
            ]
          },
          {
            "chunk": "LayoutBlockFlow DIV id='container' 0xa3c00521138:LayoutBlockFlow DIV id='container':ClipPaintPhaseSelfBlockBackgroundOnly:0",
            "state": "t:0xa3c00564968 c:0xa3c005647a8 e:0xa3c00431600",
            "bounds": "0,0 185x365",
            "displayItems": [
              "8: 0xa3c00521548:LayoutText #text:DrawingPaintPhaseForeground:0",
              "9: 0xa3c00521658:LayoutText #text:DrawingPaintPhaseForeground:0",
              "10: 0xa3c00521658:LayoutText #text:DrawingPaintPhaseForeground:1",
              "11: 0xa3c00521768:LayoutText #text:DrawingPaintPhaseForeground:0",
              "12: 0xa3c00521768:LayoutText #text:DrawingPaintPhaseForeground:1",
              "13: 0xa3c00521768:LayoutText #text:DrawingPaintPhaseForeground:2",
              "14: 0xa3c00521768:LayoutText #text:DrawingPaintPhaseForeground:3",
              "15: 0xa3c00521878:LayoutText #text:DrawingPaintPhaseForeground:0",
              "16: 0xa3c00521878:LayoutText #text:DrawingPaintPhaseForeground:1",
              "17: 0xa3c00521988:LayoutText #text:DrawingPaintPhaseForeground:0",
              "18: 0xa3c00521988:LayoutText #text:DrawingPaintPhaseForeground:1"
            ]
          },
          {
            "subsequence": "client: 0xa3c005212c0 LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent",
            "chunks": [
              {
                "chunk": "LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent 0xa3c005212c0:LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent:LayerChunk:0",
                "state": "t:0xa3c00564a70 c:0xa3c005647a8 e:0xa3c00431600",
                "bounds": "0,0 183x198",
                "displayItems": []
              },
              {
                "chunk": "LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent 0xa3c00521228:LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent:ScrollHitTest:0",
                "state": "t:0xa3c00564a70 c:0xa3c005647a8 e:0xa3c00431600",
                "bounds": "0,0 183x198",
                "displayItems": []
              },
              {
                "chunk": "LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent 0xa3c00521228:LayoutBlockFlow (positioned, children-inline) ::internal-overscroll-area-parent:ClipPaintPhaseSelfBlockBackgroundOnly:0",
                "state": "t:0xa3c00564d38 c:0xa3c00564b78 e:0xa3c00431600",
                "bounds": "0,0 915x990",
                "displayItems": []
              }
            ]
          },
          {
            "subsequence": "client: 0xa3c005213b0 LayoutBlockFlow (positioned) DIV id='dismiss'",
            "chunks": [
              {
                "chunk": "LayoutBlockFlow (positioned) DIV id='dismiss' 0xa3c005213b0:LayoutBlockFlow (positioned) DIV id='dismiss':LayerChunk:0",
                "state": "t:0xa3c00564d38 c:0xa3c00564b78 e:0xa3c00431600",
                "bounds": "0,0 915x990",
                "displayItems": [
                  "19: 0xa3c00521318:LayoutBlockFlow (positioned) DIV id='dismiss':DrawingBoxDecorationBackground:0"
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "chunk": "Inner Viewport Scroll Layer 0xa3c004079b8:Inner Viewport Scroll Layer:ForeignLayerViewportScroll:0",
    "state": "t:0xa3c005641c8 c:0xa3c00431898 e:0xa3c00431600",
    "bounds": "0,0 800x600",
    "displayItems": [
      "20: 0xa3c004079b8:Inner Viewport Scroll Layer:ForeignLayerViewportScroll:0"
    ]
  }
]
```
Open in Gerrit

Related details

Attention is currently required from:
  • Philip Rogers
Submit Requirements:
  • requirement satisfiedCode-Coverage
  • requirement satisfiedCode-Owners
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
  • requirement is not satisfiedReview-Enforcement
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: chromium/src
Gerrit-Branch: main
Gerrit-Change-Id: I4a0aea4fb911f2b076953a23cef0168d5b37f517
Gerrit-Change-Number: 7545871
Gerrit-PatchSet: 3
Gerrit-Owner: Robert Flack <fla...@chromium.org>
Gerrit-Reviewer: Philip Rogers <p...@chromium.org>
Gerrit-CC: Menard, Alexis <alexis...@intel.com>
Gerrit-Attention: Philip Rogers <p...@chromium.org>
Gerrit-Comment-Date: Thu, 05 Feb 2026 21:50:39 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
satisfied_requirement
unsatisfied_requirement
open
diffy

Philip Rogers (Gerrit)

unread,
Feb 6, 2026, 2:34:35 PM (7 days ago) Feb 6
to Robert Flack, Stephen Chenney, Dirk Schulze, AyeAye, Vladimir Levin, Menard, Alexis, chromium...@chromium.org, fserb...@chromium.org, fmalit...@chromium.org, blink-reviews-p...@chromium.org, kinuko...@chromium.org, drott+bl...@chromium.org, apavlo...@chromium.org, blink-re...@chromium.org, blink-re...@chromium.org, blink-rev...@chromium.org, blink-revi...@chromium.org, blink-rev...@chromium.org, blink-rev...@chromium.org, blink-...@chromium.org, zol...@webkit.org
Attention needed from Robert Flack

Philip Rogers added 1 comment

File third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.cc
Philip Rogers

This code is for raster inducing scroll. Normally, scrollers have clips, and so we can't nest without hitting clips, but you are adding that ability. I think we probably need to implement something like the logic in ConversionContext<Result>::SwitchToClip. I wonder if we should temporarily force composited scrolling (CompositingReasonFinder::ShouldForcePreferCompositingToLCDText) for this case, to separate out this tricky change from the overall change?

Open in Gerrit

Related details

Attention is currently required from:
  • Robert Flack
Submit Requirements:
  • requirement satisfiedCode-Coverage
  • requirement satisfiedCode-Owners
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
  • requirement is not satisfiedReview-Enforcement
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: chromium/src
Gerrit-Branch: main
Gerrit-Change-Id: I4a0aea4fb911f2b076953a23cef0168d5b37f517
Gerrit-Change-Number: 7545871
Gerrit-PatchSet: 3
Gerrit-Owner: Robert Flack <fla...@chromium.org>
Gerrit-Reviewer: Philip Rogers <p...@chromium.org>
Gerrit-CC: Dirk Schulze <dsch...@chromium.org>
Gerrit-CC: Menard, Alexis <alexis...@intel.com>
Gerrit-CC: Stephen Chenney <sche...@chromium.org>
Gerrit-CC: Vladimir Levin <vmp...@chromium.org>
Gerrit-Attention: Robert Flack <fla...@chromium.org>
Gerrit-Comment-Date: Fri, 06 Feb 2026 19:34:23 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
Comment-In-Reply-To: Robert Flack <fla...@chromium.org>
satisfied_requirement
unsatisfied_requirement
open
diffy

Philip Rogers (Gerrit)

unread,
Feb 6, 2026, 2:41:04 PM (7 days ago) Feb 6
to Robert Flack, Stephen Chenney, Dirk Schulze, AyeAye, Vladimir Levin, Menard, Alexis, chromium...@chromium.org, fserb...@chromium.org, fmalit...@chromium.org, blink-reviews-p...@chromium.org, kinuko...@chromium.org, drott+bl...@chromium.org, apavlo...@chromium.org, blink-re...@chromium.org, blink-re...@chromium.org, blink-rev...@chromium.org, blink-revi...@chromium.org, blink-rev...@chromium.org, blink-rev...@chromium.org, blink-...@chromium.org, zol...@webkit.org
File third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.cc
Philip Rogers

Wait, looking closer, is the clip tree hierarchy different from the scroll tree hierarchy? Is that intended?

Gerrit-Comment-Date: Fri, 06 Feb 2026 19:40:55 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
Comment-In-Reply-To: Philip Rogers <p...@chromium.org>
Comment-In-Reply-To: Robert Flack <fla...@chromium.org>
satisfied_requirement
unsatisfied_requirement
open
diffy
Reply all
Reply to author
Forward
0 new messages