NEW270973
Incorrect background-size when using CSS grid layout 
https://bugs.webkit.org/show_bug.cgi?id=270973
Summary Incorrect background-size when using CSS grid layout
tawfikboujeh
Reported 2024-03-14 05:49:46 PDT
I'm encountering an issue with the background-size calculation in Safari when using CSS grid layout. I have a grid container with a background image set using background-image, and I'm trying to size it using background-size with a calculation based on the viewport size and the number of grid columns and rows. Here's a simplified version of my code: index.html: ```<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Size Issue</title> <style> body { margin: 0; padding: 0; } .grid-container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); background-image: url('./rectangle.svg'); background-size: calc(100vw / 22) calc(100vh / 12); background-repeat: repeat; } .child-1 { grid-column: span 9 / span 9; background-color: rgba(255, 0, 0, 0.5); } .child-2 { grid-column: span 1 / span 1; background-color: rgba(134, 82, 48, 0.5); } .child-3 { grid-column: span 1 / span 1; background-color: rgba(48, 72, 134, 0.5); } .child-4 { grid-column: span 1 / span 1; background-color: rgba(134, 48, 48, 0.5); } .child-5 { grid-column: span 9 / span 9; background-color: rgba(0, 255, 0, 0.5); } .child-6 { grid-column: span 1 / span 1; background-color: rgba(251, 255, 0, 0.5); } </style> </head> <body> <div class="grid-container"> <!-- Grid items here --> </div> </body> </html> ``` rectangle.svg: ``` <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="border: 1px solid black"> </svg> ``` In most browsers, including Chrome and Firefox, the background-size calculation seems to work as expected. However, in Safari, the background image appears distorted or doesn't cover the grid container properly. I've tried adjusting the calculation, experimenting with different units, and checking for any known issues with Safari's rendering of background-size, but haven't found a solution yet. Browser Version: Safari 17 Expected Behavior: The background image should cover the grid container without distortion, with the size of each repeating image segment calculated based on the viewport size and the grid layout. Actual Behavior: In Safari, the background image appears distorted or doesn't cover the grid container properly. Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you! Chrome: [![chrome][1]][1] Safari: [![safari][2]][2] [1]: https://i.stack.imgur.com/0cFnj.png [2]: https://i.stack.imgur.com/4BWwr.png
Attachments
rendering in safari, firefox, chrome (173.24 KB, image/png)
2024-03-17 20:19 PDT, Karl Dubost 		no flags
Details
Safari vs Chrome vs Firefox - Code Sandbox (Test) (399.18 KB, image/png)
2024-04-05 03:59 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-03-17 20:19:02 PDT
Created attachment 470411 [details] rendering in safari, firefox, chrome Hi Thanks for the report. Is there anything missing in your test because I can not reproduce color changes in any browsers.
tawfikboujeh
Comment 2 2024-03-18 02:14:40 PDT
Comment on attachment 470411 [details] rendering in safari, firefox, chrome sorry Karl, my bad, i didn't share the elements: Here is the HTML you're supposed to render: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Background Size Issue</title> <style> body { margin: 0; padding: 0; } .grid-container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); background-image: url("./rectangle.svg"); background-size: calc(100vw / 22) calc(100vh / 12); background-repeat: repeat; } .child-1 { grid-column: span 9 / span 9; background-color: rgba(255, 0, 0, 0.5); } .child-2 { grid-column: span 1 / span 1; background-color: rgba(134, 82, 48, 0.5); } .child-3 { grid-column: span 1 / span 1; background-color: rgba(48, 72, 134, 0.5); } .child-4 { grid-column: span 1 / span 1; background-color: rgba(134, 48, 48, 0.5); } .child-5 { grid-column: span 9 / span 9; background-color: rgba(0, 255, 0, 0.5); } .child-6 { grid-column: span 1 / span 1; background-color: rgba(251, 255, 0, 0.5); } </style> </head> <body> <div class="grid-container"> <div class="child-1"></div> <div class="child-2"></div> <div class="child-3"></div> <div class="child-4"></div> <div class="child-5"></div> <div class="child-6"></div> </div> </body> </html> Here is also the example in a code sandbox https://codesandbox.io/p/sandbox/javascript-forked-rxsdvr?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltwq4t4d00063b6inzsjy2t2%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltwq4t4d00023b6iwt6f3gw6%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltwq4t4d00033b6itdenrxqc%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltwq4t4d00053b6i2io2sogr%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltwq4t4d00023b6iwt6f3gw6%2522%253A%257B%2522id%2522%253A%2522cltwq4t4d00023b6iwt6f3gw6%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltwq6enp005c3b6iwf82rzyr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A1%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A16%252C%2522endColumn%2522%253A8%257D%255D%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltwq6enp005c3b6iwf82rzyr%2522%257D%252C%2522cltwq4t4d00053b6i2io2sogr%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltwq4t4d00043b6i3mw4ecf3%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltwq4t4d00053b6i2io2sogr%2522%252C%2522activeTabId%2522%253A%2522cltwq4t4d00043b6i3mw4ecf3%2522%257D%252C%2522cltwq4t4d00033b6itdenrxqc%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltwq4t4d00033b6itdenrxqc%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Radar WebKit Bug Importer
Comment 3 2024-03-21 05:50:24 PDT
<rdar://problem/125162314>
Ahmad Saleem
Comment 4 2024-04-05 03:59:04 PDT
Created attachment 470767 [details] Safari vs Chrome vs Firefox - Code Sandbox (Test)
Note You need to log in before you can comment on or make changes to this bug.