outline hasn't the correct height
Categories
(Core :: Layout, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox90 | --- | affected |
People
(Reporter: calixte, Unassigned)
Details
Attachments
(2 files)
image.png
With the following code:
<html>
<style>
.foo {
outline: black solid 1px;
height: 10px;
width: 100px;
background: red;
}
</style>
<body>
<div class="foo">
<div>hello world</div>
<div>hello world</div>
</div>
</body>
</html>
The height of outline is the div vertical extent but not the height of the div.
The background is correct here.
It works as expected in chrome.
|
Reporter | |
Comment 1•4 years ago
|
||
|
|
Reporter | |
Comment 2•4 years ago
|
||
:dholbert, I met this problem while implementing stuff for XFA support in pdf.js and it'd very helpful to fix it, so could you help to find someone to fix it ?
|
||
Comment 3•4 years ago
|
||
This seems invalid, outline doesn't just go around the border area, it goes around all the overflow area.
|
|
||
Comment 4•4 years ago
|
||
What you want seems to be a border :)
|
|
Reporter | |
Comment 5•4 years ago
|
||
Yep, I began with a border but in XFA, borders can be inside the container so when border elements aren't identical I'm adding an extra transparent div with a border, else I use an outline (to avoid to much containers).
|
||
Comment 6•4 years ago
•
|
||
If you can provide more details / a more fully-formed testcase to explain the issues you mentioned in comment 5, we may be able to suggest a better solution; but at this point, it sounds like you do want a border (and perhaps a wrapper-div to put that border on).
For the testcase that you've posted here, Firefox's behavior is intentional and per-spec -- though outline is kind of under-specced, which is why we & Chrome differ. The best [?] spec-text that I'm aware of about it is from css-ui-3 section 4.4:
User agents should use an algorithm for determining the outline that encloses a region appropriate for conveying the concept of focus to the user.
Note: This specification does not define the exact position or shape of the outline [...]
https://www.w3.org/TR/css-ui-3/
Firefox's chosen implementation for outline is to enclose all of the descendant boxes (at least those that create scrollable area), since outline is ultimately a focus-drawing effect, and we're trying to indicate that this full set of boxes are collectively focused. Often this places the outline just outside the border-box (where you want it); but when there's overflowing content (as in your testcase), it may be larger than the border-box in order to include that overflow.
tl;dr: outline is a "behavior-defined-by-the-user-agent" effect that's meant to convey when an element is focused (in which case it can be used to enclose that element's contents). If you're not using it to convey focus, then it's not the tool that you want.
|
|
||
Updated•4 years ago
|
|
|
||
Comment 7•4 years ago
|
||
A solid box shadow may be another alternative perhaps?
Description
•