RESOLVED DUPLICATE of bug 27684133801
CSS scale transform causes blurry content when iframe contains fixed positioned content 
https://bugs.webkit.org/show_bug.cgi?id=133801
Summary CSS scale transform causes blurry content when iframe contains fixed position...
Kari
Reported 2014-06-12 09:41:10 PDT
Created attachment 232957 [details] Main HTML page for repro example Overview: CSS scale transform causes blurry content when iframe contains fixed positioned content. If you have a div containing any content, as well as an iframe, and the document loaded in the iframe contains fixed positioned content, all of the content in the outer div will become blurry when scaled up. Steps to Reproduce:
Attachments
Main HTML page for repro example (391 bytes, text/html)
2014-06-12 09:41 PDT, Kari 		no flags
Details
IFrame content for main HTML page (219 bytes, text/html)
2014-06-12 09:42 PDT, Kari 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Kari
Comment 1 2014-06-12 09:42:32 PDT
Created attachment 232959 [details] IFrame content for main HTML page
Kari
Comment 2 2014-06-12 09:44:54 PDT
Steps to Reproduce: Create an HTML page with: 1. Outer div to contain all content 2. One child div with any text 3. One child iframe referencing a document that has one fixed positioned element 4. Scale outer div up using transform scale Actual Results: Content is blurry, including the div that is not in the iframe content. Expected Results: Content is as clear as before scaling.
ar
Comment 3 2016-07-05 14:33:06 PDT
Also, in my testing, adding the following doesn't help either: - transform: translate3d(0,0,0) - backface-visibility: hidden;
Radar WebKit Bug Importer
Comment 4 2016-08-08 19:02:24 PDT
<rdar://problem/27758880>
Graeme
Comment 5 2019-03-29 10:18:40 PDT
Iframe content is always blurred when inside an element that has any CSS transform on it. e.g. a flip card style of transform: rotateY(180deg) does the same thing. Firefox is fine, by the way. This is a definite Webkit issue. Shame it's been kicking around for 5 years without a fix.
hendrik
Comment 6 2026-09-17 17:31:09 PDT
Also ran into this issue. Safari renders text inside a transformed iframe visibly blurry when the iframe contains playing video elements and its ancestor is scaled above 100%. The content remains sharp at scale(1) and below. No CSS animation or mix-blend-mode is required. Steps to reproduce: 1. Create an iframe document containing ordinary static text and muted, looping, autoplaying <video> elements. 2. Embed that document in an iframe. 3. Apply CSS transform: scale() to the iframe or one of its ancestors. 4. Compare rendering at scale(1), a value below 1, and values above 1 such as 1.5, 2, and 3. 5. Observe the edges of the static text while the videos are present and playing. Actual result: - At scale(1), the text is sharp. - Below scale(1), the text remains sharp. - At every tested scale above 1, the text becomes visibly blurry. - Removing CSS animations and mix-blend-mode does not prevent the problem; static text plus video is sufficient.
Simon Fraser (smfr)
Comment 7 2026-09-18 10:59:42 PDT
*** This bug has been marked as a duplicate of bug 27684 ***
Note You need to log in before you can comment on or make changes to this bug.