On Mobile device the page loads, the js runs, then the page zooms

[samricheson]

Look at my code pen with a mobile device. I am on iOS 9, iphone 6+. 

The page loads and runs the js before the viewport scale setting is reached. 

am i missing a $(document).ready somewhere?

 

you can view the site live here: http://karlfoto.com.

 

I am updating the index page to html5 and css3 and I thought i might add some animations with GreenSock.js Everything works great on desktop. kinda funky on my iphone.

 

the issue really shows up while on iphone at the live website. the issue looks different in codepen. 

 

Thank You Very Much Friends

See the Pen PZWBWy by samricheson (@samricheson) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

on iOS8 your live page looks like this: 

http://prntscr.com/9m0j1n

 

it animated fine. the only issue is that the text in the nav is overlapping.

 

your codepen demo in "debug" view on my iphone looks identical to the desktop layout: http://s.codepen.io/GreenSock/debug/YwNBLN

 

Pls note that codepen offers full and debug views that do not include the Editor tabs.

 

full: no editor with minimal codepen buttons but result is showed in an iframe

debug: no codepen branding or iframes (great for testing on devices)

 

it appears you need to verify you email address in order for us to see your pen in full view: http://codepen.io/samricheson/full/PZWBWy/ (i had to fork it to get to debug view)

 

All that said, i'm not sure what the issue is. your live site gives me a phone-sized, responsive layout and the animation seemed to work fine. Perhaps I'm not understanding what I should be seeing or maybe ios8 is different than 9. Screenshots might help.