NEW300318
When scaled down with a transform, the html element's background doesn't fill the iframe 
https://bugs.webkit.org/show_bug.cgi?id=300318
Summary When scaled down with a transform, the html element's background doesn't fill...
Nicolò Ribaudo
Reported 2025-10-07 05:35:51 PDT
Created attachment 476998 [details] Minimal reproduction I have an `<iframe>` element containing a document whose HTML element: - has `background-color: red` - has `transform: scale(0.5)` The background doesn't cover the whole iframe document (the "bounding box" I see when hovering over #document in the devtools). Instead it only covers the scaled down area. Both Chrome and Firefox color the whole iframe in red.
Attachments
Minimal reproduction (284 bytes, text/html)
2025-10-07 05:35 PDT, Nicolò Ribaudo 		no flags
Details
rendering in safari, firefox, chrome (129.23 KB, image/png)
2025-10-07 20:01 PDT, Karl Dubost 		no flags
Details
rendering in safari, firefox, chrome without iframe (107.53 KB, image/png)
2025-10-07 20:42 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2025-10-07 09:02:54 PDT
Thank you for the report. This still reproduced in STP 229.
Karl Dubost
Comment 2 2025-10-07 20:01:25 PDT
Created attachment 477012 [details] rendering in safari, firefox, chrome Tested in FAIL Safari Technology Preview 229 26.0 21623.1.9.1 PASS Firefox Nightly 145.0a1 14525.10.7 PASS Google Chrome Canary 143.0.7458.0 7458.0
Karl Dubost
Comment 3 2025-10-07 20:06:41 PDT
Another note: If I do <iframe srcdoc="&lt;style&gt;body { background: red; width: 100%; transform: scale(0.5); }&lt;/style&gt;" style="width:300px; height:300px; border: 3px solid black"></iframe> So instead of html { background: red; width: 100%; transform: scale(0.5); } I use body { background: red; width: 100%; transform: scale(0.5); } Then the background is fully red.
Karl Dubost
Comment 4 2025-10-07 20:42:34 PDT
Created attachment 477013 [details] rendering in safari, firefox, chrome without iframe Oh this one is interesting too. No iframes… data:text/html,<!doctype html><html style="transform: scale(0.5);width:100%;background-color: gold;"><title>test</title><body style="width:300px;height:300px;border:3px solid black;background-color:pink;"></body></html> aka: ``` <!doctype html> <html style=" transform: scale(0.5); width:100%; background-color: gold;"> <title>test</title> <body style=" width:300px; height:300px; border:3px solid black; background-color:pink;"> </body> </html> ``` Firefox and Chrome have almost the same result. (Firefox is eating 1px on the top and left borders) Safari is making a mix of gold and pink background colors for the html element.
Karl Dubost
Comment 5 2025-10-08 00:58:48 PDT
https://drafts.csswg.org/css-backgrounds/#special-backgrounds > The document canvas is the infinite surface over which the document is rendered. [CSS2] Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the <body> element) as described below. However, if the element whose background would be used for the canvas is display: none, then the canvas background is transparent. > > If the canvas background is not opaque, the canvas surface below it shows through. The texture of the canvas surface is UA-dependent (but is typically an opaque white).
Tim Nguyen (:ntim)
Comment 6 2025-10-08 01:05:44 PDT
Looks related to https://bugs.webkit.org/show_bug.cgi?id=245032 (or potentially a duplicate)
Radar WebKit Bug Importer
Comment 7 2025-10-14 05:36:12 PDT
<rdar://problem/162596515>
Note You need to log in before you can comment on or make changes to this bug.