Bug 263710

Summary:

Grid items have an unwanted line between them, especially when resizing the window (only when border radius is applied to the grid items)

Product:

WebKit

Reporter:

Orel <orelbenshamay>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Minor

CC:

bfulgham, dino, karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

OS:

macOS 13

Attachments:

Description	Flags
video of the problem (when border radius is applied to the grid items)	none
video when border radius is not applied to the grid items and therefor the problem doesn't occur.	none

Description Orel 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.

Comment 1 Orel 2023-10-25 23:41:23 PDT

Created attachment 468347 [details]
video of the problem (when border radius is applied to the grid items)

Comment 2 Orel 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.

Comment 3 Radar WebKit Bug Importer 2023-10-26 01:07:01 PDT

<rdar://problem/117521082>

Comment 4 Karl Dubost 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.