programmatically changing webkit-transformation values in animation rules

Use the CSSOM var style = document.documentElement.appendChild(document.createElement(“style”)), rule = ” run {\ 0% {\ -webkit-transform: translate3d(0, 0, 0); }\ transform: translate3d(0, 0, 0); }\ }\ 100% {\ -webkit-transform: translate3d(0, ” + your_value_here + “px, 0);\ transform: translate3d(0, ” + your_value_here + “px, 0);\ }\ }”; if (CSSRule.KEYFRAMES_RULE) { // W3C style.sheet.insertRule(“@keyframes” + rule, 0); } … Read more

Mobile Safari bug on fixed positioned button after scrollTop programmatically changed…?

We also encountered this bug on 2 different iPad applications, for us the best fix was to temporarily remove the fixed position from the fixed element once the animated scroll had finished, then use window.scroll with the vertical value we’d just performed the animated scroll to, then finally re-apply the position fixed style. It does … Read more

iPhone “Bookmark to Homescreen” removes cookies and session?

A really simple approach could be to use a unique token in your Bookmark-URL which can serve you as a unique device identifier. Example: The token can be generated at the server side at opening time of the application in Mobile Safari and before the user is prompted with the “Add to Home Screen” … Read more

How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari? this is one of the solutions proposed. Seems worth a shot. In short: set fixed elements to position:absolute when any input is focused and reset them when that element is blurred .header { position: fixed; } .footer { position: fixed; } .fixfixed .header, .fixfixed .footer { position: absolute; } and if (‘ontouchstart’ in window) … Read more

Multiple “apple-touch-startup-image” resolutions for iOS web app (esp. for iPad)?

definitive solution for startup-image and touch-icons for iPad and iPhone (landscape || portrait) and (retina || not): <!– iPhone ICON –> <link href=”×57.png” sizes=”57×57″ rel=”apple-touch-icon”> <!– iPad ICON–> <link href=”apple-touch-icon-72×72.png” sizes=”72×72″ rel=”apple-touch-icon”> <!– iPhone (Retina) ICON–> <link href=”apple-touch-icon-114×114.png” sizes=”114×114″ rel=”apple-touch-icon”> <!– iPad (Retina) ICON–> <link href=”apple-touch-icon-144×144.png” sizes=”144×144″ rel=”apple-touch-icon”> <!– iPhone SPLASHSCREEN–> <link href=”apple-touch-startup-image-320×460.png” media=”(device-width: 320px)” … Read more