[Webkit-unassigned] [Bug 234639] New: CSS transform: scale allied with box-shadow cause rendering glitch

Thu Dec 23 07:23:02 PST 2021

https://bugs.webkit.org/show_bug.cgi?id=234639

            Bug ID: 234639
           Summary: CSS transform: scale allied with box-shadow cause
                    rendering glitch
           Product: WebKit
           Version: Other
          Hardware: Other
                OS: Linux
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pedropaulosuzuki1 at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 447878

  --> https://bugs.webkit.org/attachment.cgi?id=447878&action=review

Scales a div with a box-shadow and a transition

Hello everyone! Hope y'all doing well!

Today I was testing one of my websites on GNOME Web 41.0 and I found out a visual glitch related to scaling (transform: scale(X);) when a box-shadow is applied (drop-shadow(0 0 shadow-size #hex-color;) and a transition (transition: transform transform-interval easing-function;) is also applied. It happened on a friend's iPhone too, on Safari. I created a minimal working example down below and I used a :hover state for applying the transform, as it seems to only happen when there is a back-and-forth with the container size. For you to reproduce, open the test file with a Webkit-based browser, then just hover over the green square. No issues seem to happen on Firefox and Chromium-based browsers, so it seems to be a Webkit issue.

## Minimal example:
```html
<html>
        <head>
                <style>
                        body {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 100vw;
                                height: 100vh;
                        }

                    div {
                                width: 180px;
                                height: 270px;
                                background-color: #7e7;
                                filter: drop-shadow(0 0 50px #000f);
                                transition: transform 50ms ease-in-out;
                        }

                        div:hover {
                                transform: scale(1.2);
                        }
                </style>
        </head>
        <body>
                <div></div>
        </body>
</html>
```

Tested on GNOME Web 41.0 Flatpak (WebKitGTK 2.34.2) on Linux and on Safari in a friend's iPhone (probably up to date, but I cannot confirm if that holds true).

Might be related to #61234 (https://bugs.webkit.org/show_bug.cgi?id=61234), but I tested their example on GNOME Web 41.0 and it had no issues, so this issue seems to be different in some way, shape or form. (BTW, maybe #61234 can be closed? IDK).

Thanks!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211223/bd95785f/attachment-0001.htm>