Bug 267765

Summary:

CSS grid with sticky column or row are not scaling properly with CSS transform

Product:

WebKit

Reporter:

Julien M. <julien.marcou.dev>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

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

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

Mac (Apple Silicon)

OS:

macOS 14

Attachments:

Description	Flags
Screenshot of Google Chrome versus Safari	none
Test case	none

Julien M.

Reported 2024-01-19 07:08:12 PST

Created attachment 469458 [details] Screenshot of Google Chrome versus Safari When you create a grid where a column or a row is sticky so that it's always displayed even when you scroll in the grid, then the rendering of the sticky column or row is incorrectly renderer when you scale the grid with a CSS transform. Here is a CodePen with a reproduction, on it you can see the same "grid" layout repeated 3 times, the first one is not scaled, the second one is scaled by 0.75 and the third is scaled by 0.5, the more you scale the grid, the more the rendering is wrong: https://codepen.io/julien-marcou/pen/ExMmRXb I attached a screenshot of Google Chrome versus Safari (and for your information, this is also working correctly on Firefox).

Attachments
Screenshot of Google Chrome versus Safari (254.84 KB, image/png) 2024-01-19 07:08 PST, Julien M.	no flags	Details
Test case (1.40 KB, text/html) 2024-06-06 18:42 PDT, Simon Fraser (smfr)	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2024-01-26 07:09:13 PST

<rdar://problem/121664056>

Karl Dubost

Comment 2 2024-02-12 15:13:57 PST

And Firefox behaves like Chrome.

Simon Fraser (smfr)

Comment 3 2024-06-06 18:42:25 PDT

Created attachment 471614 [details] Test case

Note You need to log in before you can comment on or make changes to this bug.