Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-overflow-3] inline/block start edges should likely refer to a "scroll origin" concept. #7237

Closed
bfgeek opened this issue Apr 27, 2022 · 0 comments
Closed

[css-overflow-3] inline/block start edges should likely refer to a "scroll origin" concept. #7237

bfgeek opened this issue Apr 27, 2022 · 0 comments
Labels
Closed Accepted as Obvious Bugfix css-overflow-3 Current Work

Comments

@bfgeek
Copy link

bfgeek commented Apr 27, 2022

https://drafts.csswg.org/css-overflow-3/#scrollable

The border boxes of all boxes for which it is the containing block and whose border boxes are positioned not wholly outside its block-start or inline-start padding edges, accounting for transforms by projecting each box onto the plane of the element that establishes its 3D rendering context. [CSS3-TRANSFORMS]

The inline-start/block-start is close - but not quite sufficient. The spec needs to introduce the concept of a "scroll origin"/"scroll originating corner"/"something". For example:

https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10262

<!DOCTYPE html>
<div id="target" style="display: flex; flex-direction: column-reverse; overflow: scroll; width: 100px; height: 100px; position: relative;">
  no overflow
  <div style="background: green; width: 50px; min-height: 200px; position: absolute; top: 400px;"></div>
</div>
<script>
var target = document.getElementById('target');
console.log(target.scrollTop);
console.log(target.scrollHeight);
</script>

Here the "scroll origin corner" is the bottom/left. Anything wholly placed below the bottom edge, or to the left of the left edge doesn't contribute to scrollable overflow.

For most things this is the inline/block-start edge, however flex follows the main/cross start edge.

Internally the engines all have this concept represented in some way:
FF: https://searchfox.org/mozilla-central/source/layout/base/nsLayoutUtils.cpp#1535-1555
Blink: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/ng/flex/layout_ng_flexible_box.cc;l=22-36;drc=1d8b1965b96c021ee069a3ebda38be7aaf8a5786;bpv=1;bpt=1
WebKit: https://github.com/WebKit/WebKit/blob/main/Source/WebCore/rendering/RenderFlexibleBox.cpp#L2314-L2330
@bfgeek bfgeek added the css-overflow-3 Current Work label Apr 27, 2022
fantasai added a commit to fantasai/csswg-drafts that referenced this issue Dec 31, 2022
@fantasai
[css-overflow-3] Define scrolling terminology w3c#8184 w3c#7303 w3c#7237
256d252
@fantasai fantasai mentioned this issue Dec 31, 2022
Merged
fantasai added a commit to fantasai/csswg-drafts that referenced this issue Dec 31, 2022
@fantasai
[css-overflow-3] Define scrolling terminology w3c#8194 w3c#7303 w3c#7237
9f031d6
fantasai added a commit that referenced this issue Jan 3, 2023
@fantasai
[css-overflow-3] Define scrolling terminology #8194 #7303 #7237
396abc1
jakearchibald pushed a commit to jakearchibald/csswg-drafts that referenced this issue Jan 16, 2023
@fantasai @jakearchibald
[css-overflow-3] Define scrolling terminology w3c#8194 w3c#7303 w3c#7237
5b7eb95
fantasai added a commit that referenced this issue Feb 1, 2023
@fantasai
[css-overflow-3] Handle non-start/start origins. #7237
f4121a8
@fantasai fantasai closed this as completed Feb 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted as Obvious Bugfix css-overflow-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @bfgeek