1. Due to the recent site upgrade, the iPadForums (iPF) App will no longer work. The new iPadForums.net website has been designed from the ground up to work perfectly from any mobile, tablet, or desktop computer using the built in internet browser. Create a shortcut to iPadForums.net on your home screen by following these steps: Create an icon for iPadForums.net

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

Discussion in 'iPad Development' started by MattE, Aug 2, 2011.

  1. MattE
    Offline

    MattE iPF Noob

    Joined:
    Aug 2, 2011
    Messages:
    2
    Thanks Received:
    0
    Trophy Points:
    0
    Ratings:
    +0 / 0
    Hey all,

    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!

    Here's the html:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <style>
                body {
                    -webkit-transform:scaleY(1.25);
                    -webkit-transform-origin:left top;
                }
                </style>
    </head>
    <body>
        Test 50<br>Test 49<br>Test 48<br>Test  47<br>Test 46<br>Test 45<br>Test 44<br>Test  43<br>Test 42<br>Test 41<br>
        Test 40<br>Test 39<br>Test 38<br>Test  37<br>Test 36<br>Test 35<br>Test 34<br>Test  33<br>Test 32<br>Test 31<br>
        Test 30<br>Test 29<br>Test 28<br>Test  27<br>Test 26<br>Test 25<br>Test 24<br>Test  23<br>Test 22<br>Test 21<br>
        Test 20<br>Test 19<br>Test 18<br>Test  17<br>Test 16<br>Test 15<br>Test 14<br>Test  13<br>Test 12<br>Test 11<br>
        Test 10<br>Test  9<br>Test  8<br>Test   7<br>Test  6<br>Test  5<br>Test  4<br>Test   3<br>Test  2<br>Test  1<br>
    </body></html>
    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!)

    Any tips or help would be much appreciated!

    Thanks,

    Matt Ebel
  2. richsadams
    Offline

    richsadams iPad Super Guru

    Joined:
    Mar 23, 2011
    Messages:
    3,504
    Thanks Received:
    99
    Trophy Points:
    0
    Location:
    NW Left Coast
    Ratings:
    +99 / 0
    Matt, welcome to the forum! Your post was moved from iPad Help to iPad Development where you're more likely to get some valuable responses. Best of luck!
  3. MattE
    Offline

    MattE iPF Noob

    Joined:
    Aug 2, 2011
    Messages:
    2
    Thanks Received:
    0
    Trophy Points:
    0
    Ratings:
    +0 / 0
    Thanks!

    Thanks! This one's really got me stumped!

Share This Page

Search tags for this page

brtest44

,

html content cut off after transform scale

,

ipad cutting off bottom safari pages

,

ipad safari off page

,

ipad web page cut off

,

is ipad safari using webkit

,

webkit scaley(n)

,

webkit-transform body left cut off