Bug 133801

Summary: CSS scale transform causes blurry content when iframe contains fixed positioned content
Product: WebKit Reporter: Kari <kwilhelm>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: grayhammy, jonlee, simon.fraser, webkit-bug-importer, webkitbugs
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Main HTML page for repro example
none
IFrame content for main HTML page none

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.
Note You need to log in before you can comment on or make changes to this bug.