NEW263710
Grid items have an unwanted line between them, especially when resizing the window (only when border radius is applied to the grid items)
https://bugs.webkit.org/show_bug.cgi?id=263710
Summary Grid items have an unwanted line between them, especially when resizing the w...
Orel
Reported 2023-10-25 23:39:54 PDT
steps to recreate: 1. Create a responsive 2x2 grid 2. apply a border radius to the grid items 3. resize to window code: https://codesandbox.io/s/wizardly-gould-z6knzt?file=/index.html the website: https://z6knzt.csb.app Browsers test Safari: ❌ Chrome: ✅ Firefox: ✅ When there is no border radius, the resizing looks normal and that white line between the grid items doesn't seem to appear.
Attachments
video of the problem (when border radius is applied to the grid items) (3.88 MB, video/quicktime)
2023-10-25 23:41 PDT, Orel
no flags
video when border radius is not applied to the grid items and therefor the problem doesn't occur. (2.19 MB, video/quicktime)
2023-10-25 23:50 PDT, Orel
no flags
Orel
Comment 1 2023-10-25 23:41:23 PDT
Created attachment 468347 [details] video of the problem (when border radius is applied to the grid items)
Orel
Comment 2 2023-10-25 23:50:01 PDT
Created attachment 468348 [details] video when border radius is not applied to the grid items and therefor the problem doesn't occur.
Radar WebKit Bug Importer
Comment 3 2023-10-26 01:07:01 PDT
Karl Dubost
Comment 4 2023-11-06 18:21:17 PST
Orel, thanks for the report I could not reproduce on a MacBook Pro M2 with the local screen and an external screen Safari Technology Preview 181 19618.1.3.1 Firefox Nightly 121.0a1 12123.11.6 Google Chrome Canary 120.0.6099.2 6099.2 Can you still reproduce in a recent version of STP.
Note You need to log in before you can comment on or make changes to this bug.