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-backgrounds] background-clip: content-box with scrollbar #11169

Open
Loirooriol opened this issue Nov 8, 2024 · 1 comment
Open

[css-backgrounds] background-clip: content-box with scrollbar #11169

Loirooriol opened this issue Nov 8, 2024 · 1 comment
Labels
css-backgrounds-3 Current Work css-overflow-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Nov 8, 2024 •
edited
Loading

https://drafts.csswg.org/css-backgrounds/#background-clip

  • border-box
    The background is painted within (clipped to) the border box.
  • padding-box
    The background is painted within (clipped to) the padding box.
  • content-box
    The background is painted within (clipped to) the content box.

This doesn't seem to be the case in any browser:

<!DOCTYPE html>
<style>
#target::-webkit-scrollbar {
  background: rgba(0, 255, 255, 0.5);
  width: 12px;
  height: 12px;
}
#target {
  scrollbar-color: rgba(0, 255, 255, 0.5) rgba(0, 255, 255, 0.5);
  display: flex;
  overflow: scroll;
  width: 100px;
  height: 100px;
  border: 15px solid rgba(0, 0, 0, 0.5);
  padding: 25px;
  background: repeating-linear-gradient(-45deg, orange 0 10px, transparent 10px 20px) content-box,
              repeating-linear-gradient(45deg, magenta 0 10px, transparent 10px 20px) padding-box;
}
#content {
  flex-grow: 1;
  background: repeating-linear-gradient(45deg, lime 0 10px, transparent 10px 20px);
}
</style>
<div id="target">
  <div id="content"></div>
</div>

I'm using ::webkit-scrollbar and widget.gtk.overlay-scrollbars.enabled=false to force classic scrollbars.

Gecko Blink WebKit
image image
  • Lime: actual content box
  • Orange: background-clip: content-box
  • Magenta: background-clip: padding-box
  • Semitransparent cyan: scrollbars
  • Semitransparent black: borders

So there seems to be interoperability that:

  • background-clip: padding-box clips to the border box shrunken by the border widths, not to the padding box.
  • background-clip: content-box clips to the border box shrunken by the border widths and padding, not to the content box.
@Loirooriol Loirooriol added css-backgrounds-3 Current Work css-overflow-3 Current Work labels Nov 8, 2024
@Loirooriol
Copy link
Contributor Author

Loirooriol commented Nov 11, 2024 •
edited
Loading

OK, I missed https://drafts.csswg.org/css-overflow/#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.

But what browsers do with content-box still seems a bug. This is what I would expect:
@Loirooriol Loirooriol changed the title [css-backgrounds] background-clip with scrollbar Nov 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-backgrounds-3 Current Work css-overflow-3 Current Work
1 participant
@Loirooriol