Bug 133801 – CSS scale transform causes blurry content when iframe contains fixed positioned content

• Component: CSS
• Status: NEW

[Kari]

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:

[Kari]

Created attachment 232959 [details]
IFrame content for main HTML page

[Kari]

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]

Also, in my testing, adding the following doesn't help either:

- transform: translate3d(0,0,0)
- backface-visibility: hidden;

[Radar WebKit Bug Importer]

<rdar://problem/27758880>

[Graeme]

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.