- From: Micah Zoltu via GitHub <sysbot+gh@w3.org>
- Date: Sun, 29 Jan 2023 16:07:15 +0000
- To: public-css-archive@w3.org
As a web developer, the behavior of Chromium is surprising to me here. When I draw outside of the border box for some reason, I expect outline to draw around the border box and not around the stuff I drew outside of that box. My (potentially incorrect) understanding of outline is that it is similar to a border, but it doesn't consume space (thus making it a good tool for hover/focus as it won't trigger reflow like adding a border will).
The situation that caused me to spend a couple hours debugging was something like this:
```html
<style>
my-element {
outline: auto;
outline-color: red;
border: 1px solid blue;
display: inline-flex;
flex-direction: column;
}
my-element::after {
height: 0;
content: 'words';
visibility: hidden;
}
</style>
<my-element>More Text</my-element>
```
In this example note that the `::after` is invisible to both the user and the layout engine, yet the outline encapsulates it on Chromium browsers.
A potential middle ground that would address this specific issue would be to treat `visibility: hidden` the same as `overflow: hidden`, which causes the outline to ignore the overflow. Even with this change, I still feel like this behavior would be surprising to developers, but not quite as surprising as having outlines of empty boxes.
--
GitHub Notification of comment by MicahZoltu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6981#issuecomment-1407703522 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 29 January 2023 16:07:17 UTC