CODEWITHSUNDEEP
javascriptioscsstransformscale
Mordred
Mordred

Reputation: 3941

-webkit-transform: scale breaks down when zoomed in on iOS

EDIT: These issues appear to have been fixed by iOS8. Consider this issue an iOS7 and earlier bug.

I've got some content (subject to CORS) that I'm serving in an iframe, that I want to be always stretched across the bottom of the browser window. I need this content to keep the same aspect ratio and fill the entire width of the browser, otherwise things will look weird. Because I don't have access to the iframe's contents I'm using -webkit-transform: scale to properly size everything properly.

I'm calculating the scaleFactor:

width = 600; // this is the original width of the iframe's contents and never changes
scaleFactor = window.innerWidth/width;

Then I set some CSS based on that scaleFactor, whenever window.innerWidth changes size:

$container.css({
    'width': (width * scaleFactor) + 'px',
    'height': (height * scaleFactor) + 'px',
    'padding': 0
});
$iframe.css({
    '-webkit-transform': 'scale('+scaleFactor+')',
    'transform': 'scale('+scaleFactor+')',

    '-webkit-transform-origin': '0 0',
    'transform-origin': '0 0'
});

This works perfectly everyplace except iOS where it starts to break down if you zoom in too far. The iFrame starts to drift off the page and isn't near wide enough. I have no clue what's going on here.

Images of what I'm talking about: Good scaling, Bad scaling.

I've got a test page setup here that clearly demonstrates the problem on any iOS.

Anybody have any ideas?

Upvotes: 2

Views: 3547

Answers (2)

Mordred
Mordred

Reputation: 3941

Here's the result of my extensive investigation before I gave up.

There are two major problems involved in applying transform: scale to content inside iframes on iOS. The first was what I pointed out in the original question, that content starts to drift away from it's specified location on the page if you are using fixed position elements. It works up to a point that seems to be based on the original size of the element, the scale factor, and presumably the viewport width. In my tests a large element might scale and position perfectly when scaled at any factor greater than 0.85. A small element might be positioned perfectly so long as the scale factor is at least >3.5. It seems almost random, so I didn't bother determining what the exact point was.

I didn't try this on relatively positioned elements, but I'm assuming they function similar to fixed position elements.

There is a rather kludgy workaround for this involving using absolutely positioned elements anchored to the bottom of the page using scroll offsets and innerHeight. i.e.:

container.css('top', (document.body.scrollTop + window.innerHeight - container.height()) + 'px');
container.css('left', document.body.scrollLeft);

And updating this on every drag, transform, pinch, resize, etc. There is some weirdness involved with this method (iOS doesn't update scroll offsets until after a drag has completely stopped) but it's workable if you absolutely had to do it.

However, even though that's a possibility, when you scale content inside iframes on iOS, if you have ANY anchor tags (or other elements that need to be clicked on), the clickable area stays unscaled. If you have an image in inside an anchor tag that's 200x100 and you scale it 2x, the image will be twice as big, but the anchor will only respond to the first 200x100. Using the iOS simulator, if you double click on an image outside the clickable area Safari is even helpful enough to darken the original bounds so you know where you could have clicked. It's pretty much a deal breaker if you want to display anything other than text/images that don't require clicking or other inputs. More information here:

CSS3 Transform scaling issue on IPad Safari

"-webkit-transform: scale(2)" doesn't affect click area of Facebook Like Button (on iPad)

Until Apple fixes these long standing bugs in mobile Safari, it seems that trying to scale iframe content using webkit-transform isn't a viable option unless you are only targeting Chrome.

Edit:

Demo of scaling issues here.

Upvotes: 3

CodeToad
CodeToad

Reputation: 4724

Combo of iframe, transform scale, and ios is tricky.

There are bugs with transform scale. Not always in your control.

You can try zoom property instead of scale, and use scale for firefox where its not supported.

I don't have ios here so I cant check but it often works wonders. Though you may have issues with line breaks in text with zoom.

zoom solves this bug in chrome

Upvotes: 1

Related Questions