Bug 178224
| Summary: | outline-width affecting padding, not the width of the outline. | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Rob Dodson <robdodson> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, simon.fraser, zalan |
| Priority: | P2 | Keywords: | FromImplementor |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Rob Dodson
According to MDN: "The outline-width CSS property sets the width (thickness) of an element's outline."
In Safari setting the outline-width property affects the distance between the element and the outline. But the outline itself is always the same width.
Example: http://jsbin.com/tegisinedo/1/edit?html,output
Clicking on the element in the above example should draw a 20px wide outline. This is the behavior in Firefox and Chrome. In Safari it instead puts 20px of padding between the element and the outline.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Rob Dodson
It looks like this is a differing opinion between the browsers.
In Chrome and Firefox if you set outline-width, it will use the default focus indicator and just change its width.
In Edge, if you set outline-width it will remove any default styling so it appears as if it’s gone. If you additionally set outline-style: solid, then the ring reappears and properly applies outline-width.
In Safari, if you set outline-width it will affect the padding between the outline and the element. If you additionally set outline-style: solid, then the ring will be drawn to the correct width.
Simon Fraser (smfr)
You should raise a GitHub issue in the CSSWG.
Brent Fulgham
Did any such issue get raised? Is there any action to take here?