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] Reserved scroller space between content edge and padding edge #11288

Open
gitspeaks opened this issue Nov 28, 2024 · 6 comments
Open

[css-overflow-3] Reserved scroller space between content edge and padding edge #11288

gitspeaks opened this issue Nov 28, 2024 · 6 comments
Labels
css-overflow-3 Current Work

Comments

@gitspeaks
Copy link

The CSS Overflow 3 spec, Section 4.1 states:

When reserving space for a scrollar placed at the edge of an element’s box, the reserved space is inserted between the inner border edge and the outer padding edge.

Test:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      article {
        border: 10px solid red;
        width: 200px;
        height: 200px;
        position: relative;
        overflow: scroll;
        padding-right: 50px;
        
      }
      aside {
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <article>
      <aside>ASIDE</aside>
      <p>Text1</p>
      <p style="text-align: right;">Text2</p>
    </article>
  </body>
</html>

In Chrome DevTools, the scrollbar appears between the content box edge (inner edge) and the padding box edge, not between the inner border edge and outer padding edge as specified.

scroller
@gitspeaks
Copy link
Author

gitspeaks commented Nov 28, 2024 •
edited
Loading

Also, the terms "inner" and "outer" in Section 4.1 seem irrelevant in this context. See PR #11287 for details.

This also applies to Section 4.2

@Loirooriol
Copy link
Contributor

The devtools don't say where the edges are...

@Loirooriol Loirooriol added the css-overflow-3 Current Work label Nov 29, 2024
@gitspeaks
Copy link
Author

gitspeaks commented Nov 29, 2024 •
edited
Loading

The devtools don't say where the edges are...

Of course it does. The devtools clearly show the perimeter establishing each area, which, by definition, represents an "edge." It’s very clear that the gutter is placed inside the padding area. While its width is not added to the indicated width, it is visibly rendered in green and bounded by the padding perimeter.

box

As for the illustration:

box-mode

This doesn’t make sense to me. The border area is defined as the space between the padding edge and the border edge. What you’re calling "inner border" is actually the padding edge. Under the current definition of edges as perimeters, there is no additional "area between edges" beyond what is already specified.

@Loirooriol
Copy link
Contributor

What you’re calling "inner border" is actually the padding edge

That's according to CSS Box. CSS Overflow is implicitly patching the definition: https://drafts.csswg.org/css-overflow-3/#scrollbar-sizing

When reserving space for a scrollbar placed at the edge of an element’s box, the reserved space is inserted between the inner border edge and the outer padding edge. For the purpose of the background positioning area and background painting area however, this reserved space is considered to be part of the padding box.

Ergo the scrollbar gutter is not normally considered to be part of the padding box.

@gitspeaks
Copy link
Author

CSS Overflow is implicitly patching the definition: https://drafts.csswg.org/css-overflow-3/#scrollbar-sizing

CSS Overflow uses undefined terms, so it’s unclear what it is actually trying to convey.

If I understand you correctly, you’re saying that: "the gutter is placed between the padding area and the border area". If that’s the case, it should be explicitly stated as such, rather than relying on "inner" and "outer" terms, which are meaningless within the context of the current vocabulary.

@Loirooriol
Copy link
Contributor

Yes, that's my understanding of CSS Overflow, which I agree should be more explicit.

@gitspeaks gitspeaks mentioned this issue Nov 29, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-overflow-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Loirooriol @gitspeaks