Bug 229803 - border-image-slice distorted when using with border-width
Summary: border-image-slice distorted when using with border-width
Status: NEW
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: 2021-09-09 06:40 PDT (History)
5 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

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>