Bug 286472
| Summary: | padding-left / inline-end is not applied in RTL | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jacob Rask <jacob> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 18 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | Unspecified | ||
| URL: | https://codepen.io/jacobrask/pen/azoQBMv | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=255346 | ||
| Bug Depends on: | 286753 | ||
| Bug Blocks: | 292022 | ||
Jacob Rask
An element with
- fixed width
- `dir=rtl`
- either `padding-inline-end` or padding-left`
will not get the padding applied. The padding is not rendered and is not included in the element's `scrollWidth`.
See https://codepen.io/jacobrask/pen/azoQBMv
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/143656026>
alan baradlay
Thank you for filing this bug!
Sadly this is not specific to RTL, WebKit fails to account for inline-end padding in both directions.
<style>
.scroller {
background: yellow;
width: 100px;
height: 100px;
padding-inline-end: 500px;
overflow-x: auto;
overflow-y: hidden;
}
.content {
width: 300px;
height: 50px;
background-color: green;
}
</style>
<div class=scroller>
<div class=content></div>
</div>