I am attempting to implement a text snippet that will "zoom and fade in" upon the page loading. In order to do this, I am creating a div containing the text and applying an immediate transform to it:
.whatIwantZoomed {
opacity:0;
/* Add Vendor Prefixes */
transform:scale(4,4);
/* Add Vendor Prefixes */
transition:transform 1s, opacity 1s;
}
When invoked from my Javascript function, an animated class is added which reduces the scale to (1,1):
.whatIwantZoomed.animated {
opacity:1;
/* Add Vendor Prefixes */
transform:scale(1,1);
}
The issue arises on mobile Safari (both iOS 7 & iOS 8), where the scaled text ends up larger than the viewport width, causing a 'resize' and zoom effect on the page. Once the animation completes, the page returns to its normal state.
I am trying to find a solution to prevent this unintended alteration of the viewport width. I have attempted setting the body to overflow-x:hidden; with no success, and adjusting the viewport meta tag has not helped either.
If anyone has insight or a possible solution to this problem, I would greatly appreciate it. Thank you.
EDIT: Here is a fiddle showcasing this issue. Take note of the scrollbars in the HTML frame - this is what I aim to avoid.