Skip to content

Commit 2a36557

Browse files
committed
[css-overflow][css-align] Require end-edge padding in scrollable overflow
See issue #129 (comment)
1 parent df784a4 commit 2a36557

File tree

4 files changed

+22
-47
lines changed

4 files changed

+22
-47
lines changed

css-align-3/Overview.bs

+1-21
Original file line numberDiff line numberDiff line change
@@ -1122,33 +1122,13 @@ Overflow and Scroll Positions</h3>
11221122
and its content will appear to overflow its main-start edge.
11231123
</div>
11241124

1125-
Because the <a>scroll container</a>’s end-edge padding
1126-
is not always included in the <a>scrollable overflow area</a>
1127-
(see [[css-overflow-3#scrollable]]),
1128-
performing such alignment might require
1129-
that the <a>alignment subject</a> be positioned
1130-
in a way that would normally not be possible just by scrolling.
1131-
To resolve this problem
1132-
(and be consistent across alignment values),
1133-
all non-''align-content/normal'' values of 'align-content'/'justify-content'
1134-
cause the <a>scrollable overflow area</a> to be extended
1135-
in the relevant axis
1136-
however much would be required to make it possible to scroll
1137-
to a position satisfying ''align-content/end'' alignment in that axis.
1138-
(In general, this means that the <a>scroll container</a>’s padding
1139-
is added to the bounding rectangle of its in-flow children
1140-
on <em>both</em> sides of the <a>scrollable overflow area</a>.
1141-
See [[css-overflow-3]] for details.)
1142-
11431125
<figure>
1144-
<img src="images/scroll-align-padding.jpg" alt="">
1126+
<img src="images/scroll-align-padding.jpg">
11451127
<figcaption>
11461128
Issue: Replace this image with a proper SVG.
11471129
</figcaption>
11481130
</figure>
11491131

1150-
ISSUE: Coordinate wording with css-overflow once it's less of a mess.
1151-
11521132
None of this changes how scroll coordinates are assigned:
11531133
the origin is still where it would be in a ''align-content/start''-aligned container,
11541134
it just might be initially positioned outside the <a>scrollport</a>.
-13.7 KB
Loading

css-overflow-3/Overview.bs

+21-26
Original file line numberDiff line numberDiff line change
@@ -259,36 +259,31 @@ Scrollable Overflow</h3>
259259
Issue: Need to evaluate compat of honoring or ignoring 'clip' and 'clip-path'.
260260

261261
<li>
262-
Additional padding added as necessary
263-
to the end-side of the [=scrollable overflow rectangle=]
264-
such that the box’s content can be scrolled to a position
265-
that would satisfy the requirements of ''place-content: end'' alignment.
266-
267-
Note: This padding represents the box’s own padding
268-
within the [=scrollable overflow rectangle=]
262+
Additional padding added
263+
to the [=end=]-side of the [=scrollable overflow rectangle=]
264+
as necessary to enable a scroll position
265+
that satisfies the requirements of ''place-content: end'' alignment.
266+
267+
Note: This padding represents,
268+
within the [=scrollable overflow rectangle=],
269+
the box’s own padding
269270
so that when its in-flow content is scrolled to the end,
270-
there is padding between the end-edge of the content
271+
there is padding between the end-edge of its content
271272
and the border edge of the box.
272273
It typically ends up being exactly the same size as the box's own padding,
273-
except in a few cases, such as when an out-of-flow element,
274+
except in a few cases--
275+
such as when an out-of-flow element,
274276
or the visible overflow of a descendent,
275-
is increasing the size of the [=scrollable overflow rectangle=].
276-
277-
Including this padding is optional for <a>block containers</a>
278-
in the inline axis if 'align-content'
279-
is ''justify-content/normal''.
280-
281-
Note: It's hoped that including including inline-axis padding here is Web-compatible
282-
as that is a better behavior,
283-
but investigation as to whether that can be done without breaking existing content has not yet concluded.
284-
This clause is optional while under investigation.
285-
Existing behavior in the inline axis is
286-
<a href="https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8496">quirky</a>
287-
<a href="https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8499">and</a>
288-
<a href="https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=9539">inconsistent</a>.
289-
See <a href="https://github.com/w3c/csswg-drafts/issues/129">Issue 129</a>.
290-
291-
<!-- Make sure http://jsbin.com/qececaqilo/edit?html,css,output is clearly defined. -->
277+
has already increased the size of the [=scrollable overflow rectangle=]
278+
outside the conceptual “content edge” of the [=scroll container=]’s content.
279+
280+
<figure>
281+
<img src="images/scroll-align-padding.jpg">
282+
<figcaption>
283+
Issue: Replace this image with a proper SVG.
284+
</figcaption>
285+
</figure>
286+
292287
</ul>
293288

294289
<!--
68.5 KB
Loading

0 commit comments

Comments
 (0)