border-image-slice distorted when using with border-width

• Component: CSS
• Status: RESOLVED DUPLICATE

[Brandon McConnell]

Created attachment 437145 [details]
Browser screenshots

`border-image-slice` in all other browser rendering engines maintains aspect ratio and displays more or fewer of the `border-image` as the `border-width` increases or decreases. Only on WebKit, does the `border-image` stretch/squish and distort the aspect ratio rather than displaying more or fewer `border-image` instances.

This can be reproduced reliably in any environment, and can be seen on the MDN docs page for `border-image-slice`. Scroll down to the interactive preview and drag the `border-width` range slider handle either left or right while keeping the `border-image-slice` handle stationary at 30. In Safari/WebKit, you will see the `border-image` become distorted, whereas in other browsers you will see the border shrink or grow and fit in more or fewer `border-image` instances.

MDN `border-image-slice` example intrapage link: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice#result

—

I have attached screenshots of WebKit vs. Firefox/Chrome.

[Brandon McConnell]

Created attachment 437146 [details]
Safari - Desktop screenshot

[Brandon McConnell]

Created attachment 437147 [details]
Safari - Mobile screenshot

[Brandon McConnell]

Created attachment 437148 [details]
Firefox - Desktop screenshot

[Brandon McConnell]

Created attachment 437149 [details]
Chrome - Desktop screenshot

[len]

May be related to this 5.5 year old bug that was never fixed: https://bugs.webkit.org/show_bug.cgi?id=155955

[Radar WebKit Bug Importer]

<rdar://problem/82922399>

[Ahmad Saleem]

Tested on WebKit ToT (262042@main). Working fine now.

Marking Duplicate to bug highlighted in Comment 05. Which recently got fixed.

*** This bug has been marked as a duplicate of bug 155955 ***