iframe CSS3 scaling issue on iPad Safari (iOS 5.0.1)

Question

I need to scale up an iframe to make it bigger (I have no control over the source code of the iframe's content). I'm trying to achieve it via the -webkit-transform: scale(1.3) CSS property.

The iframe's content is scaled up correctly, but when I try to touch any of the controls in the iframe, then it seems that the touch event is being received at the wrong location (I can see that the control's "shadow" is highlighted at the wrong place upon touch). Therefore event handlers are not working (I suspect they aren't getting called, because the touch is detected at the wrong place). Has anybody encountered this issue? Can it be resolved?

I've created a test case that produces the problem (try it in iPad Safari): http://jsfiddle.net/9vem2/

Source in a more readable format:

Parent page (the container of the iframe):

<!DOCTYPE html>
<html>
<head>
    <title>Parent</title>

    <style type="text/css"> 
        iframe
        {        
            left: 200px;
            -webkit-transform: scale(1.3);
        }
    </style>    
</head>

<body>
    <h2>Parent</h2>
    <iframe src="child.html"></iframe>
</body>
</html>

Child page (iframe content):

<!DOCTYPE html>
<html>
<head>
    <title>Child</title>
</head>

<body>
    <h2>Child</h2>
    <input type="text"></input>
    <button onclick="alert('hello');">Button</button>
</body>
</html>

Hey kahoon, did you ever resolve this issue? I'm looking into this now. Can you update with an answer if you resolved it? — djburdick, Sep 24 '13 at 19:01
@djburdick: I haven't resolved this particular scenario. I had to resort to putting the scaling CSS code into the iframe's content (which had to be negotiated with a 3rd party). This of course doesn't help you if you have no way to modify the iframe's source code. — Attila Kun, Sep 24 '13 at 19:20

score 3 · Answer 1 · answered Jul 23 '12 at 12:21

3

This feels like a hacky solution but as it's fixing what appears to be a bug, I suppose it doesn't matter. Rather than scaling in 2D, I have moved the iframe in 3D, toward the viewer, see this demo: http://jsfiddle.net/ianlunn/MSUmS/

The <body> is made into a 3D space, like so:

body {
 -webkit-perspective: 800px;
}

Then the iframe is moved toward the viewer along the Z axis in that 3D space:

iframe {
    -webkit-transform: translateZ(130px);
}

This may need modification for a real-world application, especially if the iframe is wrapped in something other than the <body>.

answered Jul 23 '12 at 12:21

Ian Lunn

1,354
14
20

2

Unfortunately this solution produces the same issues as in my original post when I try to position the iframe horizontally. I've tried it with setting margin-left and translateX too. – Attila Kun Jul 24 '12 at 20:48
1

Your post doesn't mention positioning the iframe horizontally. Can you provide an updated demo and explanation of what you're trying to achieve? – Ian Lunn Jul 25 '12 at 07:33
Not sure why this is receiving upvotes. It doesn't fix the problem, even on iOS7: http://jsfiddle.net/1e7p6kk9/2/ – Mordred Sep 03 '14 at 16:43

score 0 · Answer 2 · answered Jul 26 '12 at 16:27

what may be easier is making the iFrame responsive so if the browser resizes, so does the content that is responsive...This might fix it because scale seems to just scale the frame and not re-adjust content within.

http://jsfiddle.net/D2uBW/

Let me know how close I am to what you are looking for and please comment with any thoughts or fixes.

score 0 · Answer 3 · answered Oct 01 '13 at 16:25

The are some bugs on iframe implementation on iOS 5 as you can see in Phonegap Iframe Usage , even if you are not using phonegap you can find useful tips because is HTMS/JS/CSS based. I cite the last paragraph of that document:

When using native scrolling on iOS 5 and above, iFrames can potentially interfere and cause the scrolling gestures to be incorrectly interpreted. This is a bug within Apple's implementation, and the only workaround is to avoid the use of iFrames or use a different scrolling library (such as iScroll).

Also have you tried a Javascript solutions I think is posible to inject CSS files to the HTML on the iframe from the parent window, because finally it's all loaded in DOM

iframe CSS3 scaling issue on iPad Safari (iOS 5.0.1)

3 Answers3

Linked