NEW 280613
large subgrid gap behaves differently in Safari and Chrome 
https://bugs.webkit.org/show_bug.cgi?id=280613
Summary large subgrid gap behaves differently in Safari and Chrome
Rogier de Ruijter
Reported 2024-09-30 06:19:19 PDT
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>large gap subgrid safari</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <main> <section> <div></div> </section> </main> </body> <style> body { display: grid; grid-template-columns: repeat(13, 1fr); } main { margin: 0 auto; max-width: 70ch; padding: 1rem; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 10rem; } section { grid-column: 1 / -1; div { background-color: red; height: 100px; } } </style> </html> ``` When resizing the screen to a small screen size, the div overflows its container. This does not happen in Chrome and Firefox. I believe this happens because of the gap: 10rem, that probably gets inherited by the subgrid and then breaks the max container width. There is a workaround by changing gap to row-gap.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-10-07 06:20:14 PDT
<rdar://problem/137422489>
Note You need to log in before you can comment on or make changes to this bug.