133801 2014-06-12 09:41:10 -0700 CSS scale transform causes blurry content when iframe contains fixed positioned content 2019-03-29 10:18:40 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Unspecified Unspecified NEW InRadar P2 Normal --- 1 kwilhelm webkit-unassigned grayhammy jonlee simon.fraser webkit-bug-importer webkitbugs oldest_to_newest 1015134 0 232957 kwilhelm 2014-06-12 09:41:10 -0700 Created attachment 232957 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: 1015138 1 232959 kwilhelm 2014-06-12 09:42:32 -0700 Created attachment 232959 IFrame content for main HTML page 1015140 2 kwilhelm 2014-06-12 09:44:54 -0700 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. 1207949 3 webkitbugs 2016-07-05 14:33:06 -0700 Also, in my testing, adding the following doesn't help either: - transform: translate3d(0,0,0) - backface-visibility: hidden; 1218674 4 webkit-bug-importer 2016-08-08 19:02:24 -0700 <rdar://problem/27758880> 1522486 5 grayhammy 2019-03-29 10:18:40 -0700 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. 232957 2014-06-12 09:41:10 -0700 2014-06-12 09:41:10 -0700 Main HTML page for repro example index.html text/html 391 kwilhelm PGh0bWw+CjxoZWFkPgo8dGl0bGU+U2FmYXJpIFNjYWxlIFRlc3Q8L3RpdGxlPgo8L2hlYWQ+Cjxi b2R5PgoKPGRpdiBzdHlsZT0icG9zaXRpb246cmVsYXRpdmU7dG9wOjBweDtsZWZ0OjBweDt3aWR0 aDozNTBweDtoZWlnaHQ6MzUwcHg7Ym9yZGVyOjFweCBibGFjazstd2Via2l0LXRyYW5zZm9ybTpz Y2FsZSg0KTsgLXdlYmtpdC10cmFuc2Zvcm0tb3JpZ2luOjAgMDtvdmVyZmxvdzphdXRvIj4KCjxk aXYgc3R5bGU9InBvc2l0aW9uOnJlbGF0aXZlO3RvcDowcHg7bGVmdDowcHg7Ij5Ob3QgaW4gaWZy YW1lPC9kaXY+Cgo8aWZyYW1lIHNyYz0iY29udGVudC5odG1sIiBzdHlsZT0id2lkdGg6MzAwcHg7 aGVpZ2h0OjMwMHB4Ij48L2lmcmFtZT4KCjwvZGl2PgoKPC9ib2R5Pgo8L2h0bWw+Cg== 232959 2014-06-12 09:42:32 -0700 2014-06-12 09:50:03 -0700 IFrame content for main HTML page content.html text/html 219 kwilhelm PGh0bWw+CjxoZWFkPjx0aXRsZT5JRnJhbWUgQ29udGVudDwvdGl0bGU+PC9oZWFkPgo8Ym9keT4K CjxkaXYgc3R5bGU9InBvc2l0aW9uOmZpeGVkO3RvcDoxMHB4O2xlZnQ6MTBweCI+VGV4dCAxIGlu IGlmcmFtZTwvZGl2Pgo8ZGl2IHN0eWxlPSJwb3NpdGlvbjpyZWxhdGl2ZTt0b3A6MTBweDtsZWZ0 OjEwcHg7Ij5UZXh0IDIgaW4gaWZyYW1lPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4K