Ipad Safari -webkit-transform:scaleY(1.25) pushes content off-page

ExpandCollapse

iPF Noob

Im tweaking a website for ease-of-use by iPad users. A lot of clickable fields in the original site are too small for finger-based tapping, so I figured a quick solution would be to use the CSS3 transform:scaleY() property to make the whole site just a bit taller and easier to tap.

The problem is, when I scaleY(1.25) any html, Safari/iPad doesn't seem to acknowledge that the total SIZE of the page has changed, and the bottom 20% (.25 out of 1.25) is inaccessible even when you scroll down!

I'll attach a simple sample HTML file which gives a perfect example of the problem: I created a bunch of lines reading "Test xx" where xx runs from 50 down to 1. As you can see (if you put this html file up and browse to it with an iPad), the bottom 10 lines are cut off at the bottom of the page!

Am I misunderstanding some core concept about scaling, viewports, etc? I know the iPad interprets web-pages differently than standard web browsers to allow for different screen- and viewport-sizes, but the behavior I'm seeing just doesn't add up to me! Scaling the <body> of my page shouldn't push portions of it to some inaccessible region!

Also, when I'm scaling, firebugLite gets scaled off the bottom of the screen too! So not many options as far as debugging goes!

(As I typed this, I thought 'maybe I need to apply the scale() to html {} instead' ... So I just tried that, to no avail!)

is ipad safari using webkit

webkit scaley(n)

webkit-transform body left cut off

About Us

Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our iPad community is one of the best.
iPadForums.net is not affiliated with Apple. We are an enthusiast site dedicated to everything Apple iPad