Bug 229803 - border-image-slice distorted when using with border-width
Summary: border-image-slice distorted when using with border-width
Status: RESOLVED DUPLICATE of bug 155955
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 14
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://developer.mozilla.org/en-US/d...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-02 06:39 PDT by Brandon McConnell
Modified: 2023-03-23 21:29 PDT (History)
6 users (show)

See Also:

Attachments
Browser screenshots (274.01 KB, application/zip)
2021-09-02 06:39 PDT, Brandon McConnell 		no flags Details
Safari - Desktop screenshot (56.18 KB, image/png)
2021-09-02 06:40 PDT, Brandon McConnell 		no flags Details
Safari - Mobile screenshot (195.89 KB, image/jpeg)
2021-09-02 06:40 PDT, Brandon McConnell 		no flags Details
Firefox - Desktop screenshot (57.92 KB, image/png)
2021-09-02 06:40 PDT, Brandon McConnell 		no flags Details
Chrome - Desktop screenshot (60.30 KB, image/png)
2021-09-02 06:41 PDT, Brandon McConnell 		no flags Details
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Brandon McConnell 2021-09-02 06:39:48 PDT 
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.
Comment 1 Brandon McConnell 2021-09-02 06:40:30 PDT 
Created attachment 437146 [details]
Safari - Desktop screenshot
Comment 2 Brandon McConnell 2021-09-02 06:40:43 PDT 
Created attachment 437147 [details]
Safari - Mobile screenshot
Comment 3 Brandon McConnell 2021-09-02 06:40:58 PDT 
Created attachment 437148 [details]
Firefox - Desktop screenshot
Comment 4 Brandon McConnell 2021-09-02 06:41:18 PDT 
Created attachment 437149 [details]
Chrome - Desktop screenshot
Comment 5 len 2021-09-02 10:34:49 PDT 
May be related to this 5.5 year old bug that was never fixed: https://bugs.webkit.org/show_bug.cgi?id=155955
Comment 6 Radar WebKit Bug Importer 2021-09-09 06:40:20 PDT 
<rdar://problem/82922399>
Comment 7 Ahmad Saleem 2023-03-23 21:29:36 PDT 
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 ***