Bug 229803

Summary: border-image-slice distorted when using with border-width
Product: WebKit Reporter: Brandon McConnell <brandon>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: ahmad.saleem792, brandon, len, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Unspecified   
OS: Unspecified   
URL: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice#result
See Also: https://bugs.webkit.org/show_bug.cgi?id=155955
Attachments:
Description Flags
Browser screenshots
none
Safari - Desktop screenshot
none
Safari - Mobile screenshot
none
Firefox - Desktop screenshot
none
Chrome - Desktop screenshot none

Brandon McConnell
Reported 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.
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 attachment proposed patch, testcase, etc.
Brandon McConnell
Comment 1 2021-09-02 06:40:30 PDT
Created attachment 437146 [details] Safari - Desktop screenshot
Brandon McConnell
Comment 2 2021-09-02 06:40:43 PDT
Created attachment 437147 [details] Safari - Mobile screenshot
Brandon McConnell
Comment 3 2021-09-02 06:40:58 PDT
Created attachment 437148 [details] Firefox - Desktop screenshot
Brandon McConnell
Comment 4 2021-09-02 06:41:18 PDT
Created attachment 437149 [details] Chrome - Desktop screenshot
len
Comment 5 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
Radar WebKit Bug Importer
Comment 6 2021-09-09 06:40:20 PDT
<rdar://problem/82922399>
Ahmad Saleem
Comment 7 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 ***
Note You need to log in before you can comment on or make changes to this bug.