Search code examples
javascriptioscssuiwebviewscale

How to scale an iFrame inside of iOS UIWebView

The Problem:

I've been seeing problems with the native iOS UIWebView with regard to CSS3 transform:scale3D(scalar, scalar, 1)

We have an <iframe> which contains pixel-perfect art, consisting of many elements (text, rectangles, videos, etc), and my task is to scale the <iframe> where it fits fullscreen, not just the designed 320x480 or whatever

First of all, touch events aren't propagating through at all. Secondly, when the user holds down on the <iframe>, they can see DOM outlines for the elements at the prior, incorrect locations, at incorrect sizes (before the <iframe> was scaled to fit the screen)

The blue area should be the entire screen, not the original location User holds down, sees shadow of where it was before transform scale

To top it all off, sometimes the scaling introduces random horizontal / vertical lines where the UIWebView decided not to repaint

My Attempts:

I tried using css zoom: which I understand is somewhat of a replacement for the <meta> tag viewport zooming, but I was still seeing random unpainted lines. I'm not exactly sure if I tried using hardware acceleration (transform in z / 3d space) but I'm pretty sure I did, the same as with the regular transform:scale3d approach

I also tried to crawl the configuration object, which has properties like x, y, width, height, but it seems like some properties need to be rounded where others do not (text font size and letter spacing for example, border widths etc). Rasterizing is causing a headache and I can't seem to get a pixel-perfect, scaled <iframe> I'm not sure which elements support decimal px CSS, so I'm considering converting everything to em

I haven't yet used an actual <meta> tag because it can't be dynamically appended.. needs to be on the HTML before the DOM is rendered. Another reason I didn't use the <meta> is because I need to know the viewport size prior to writing the <meta> properties (I can possibly query from out native counterpart if someone confirms this solution works)

The Question:

Has anyone encountered this problem before? Is it possible to get a pixel-perfect, scaled representation, given that the scalar may be 1.333333? I know that Apple is replacing the UIWebView with an embeddable Safari implementation (mobile web works fine for my usecase, just not native iOS), but in the meantime, is there any hope for iOS? Links highly appreciated! Thanks in advance..

Solution

  • My coworker found the answer!

    Answer:

    You can't scale an <iframe> from the outside DOM, you have to postMessage() into the <iframe> and use document.body.style.webkitTransform = "scale(1337)"

    Hope this helps somebody else in need!

    Credit ultimately goes to http://adexcite.com/iframe_scaling_test.html