Bug 270973

Summary:

Incorrect background-size when using CSS grid layout

Product:

WebKit

Reporter:

tawfikboujeh

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

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

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

Mac (Apple Silicon)

OS:

macOS 14

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none
Safari vs Chrome vs Firefox - Code Sandbox (Test)	none

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">  </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

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.