iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

The new main version of the Apple’s iOS is with us, along with the new iPhone 5 and the iPod Touch fifth generation. As every big change, lot of new stuff is available for HTML5 developers and -as always- no much official information is available.

Quick review

I’m going to divide this post in two parts: iPhone 5 and iOS 6 new stuff.

On iPhone 5:

  • New screen size
  • New simulator
  • What you need to do
  • Problems

New features on iOS 6:

  • File uploads and camera access with Media Capture and File API
  • Web Audio API
  • Smart App Banners for native app integration
  • CSS 3 Filters
  • CSS 3 Cross Fade
  • CSS Partial Image support
  • Full screen support
  • Animation Timing API
  • Multi-resolution image support
  • Passbook coupons and passes delivery
  • Storage APIs and web app changes
  • Web View changes for native web apps
  • Debugging with Remote Web Inspector
  • Faster JavaScript engine and other news

iPhone 5

The new iPhone 5 -along with the iPod Touch 5th generation- has only one big change in terms of web development: screen resolution. These devices have a wide 4″ screen, WDVGA (Wide Double VGA) 640×1136pixels, 326 DPI -Retina Display as Apple called it. These devices have the same width as iPhone 4/4S but 176 more pixels-height on portrait mode.

New simulator

iOS Simulator on Xcode 4 includes iPhone 5 emulation

The new Xcode 4 (available on the Mac AppStore) includes the updated iOS Simulator. The new version has three options for the iPhone simulation:

  • iPhone: iPhone 3GS, iPod Touch 1st-3rd generation
  • iPhone Retina 3.5″: iPhone 4, iPhone 4S, iPod Touch 4th generation
  • iPhone Retina 4″: iPhone 5, iPod Touch 5th generation

The new simulator also includes the new Maps application replacing Google Maps by default and Passbook.

What you need to do for the new devices

Usually, if your website/app is optimized for vertical scrolling, you should not have any problem. Same viewport, icons and techniques for iPhone 4/4S should work properly.  Remember, when updating the iOS, you are also updating the Web View: that means that all the native web apps -such as PhoneGap/Apache Cordova apps- and pseudo-browsers such as Google Chrome for iOS are also updated. However if your solution is height-dependent, then you may have a problem.Just look at the following example of the Google Maps website on iPhone 4 and iPhone 5. As it is talking the height as a constant, the status bar is not hidden and there is a white bar at the bottom.

Be careful if you’ve designed for an specific height as Google Maps. As you can see (right caption is from iPhone 5) there is a white bottom bar and the URL bar can’t be hidden as there is no enough content.

If you are using Responsive Web Design you should not have too much trouble as usually, RWD techniques are using the width and not the height for conditionals.

Device detection

At the time of this writing there are no iPhone 5 on the street yet. However, as far as every test I could check, there is no way to detect iPhone 5 server-side. The user agent only specifies an iPhone with iOS 6, and the same exact user agent is being used for iPhone 4S with iOS 6 and iPhone 5.

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

Therefore, the only way to detect the presence of a 4″ iPhone device is to use JavaScript and/or media queries, client-side. If you need to know server-side, you can plant a cookie from client-side for next load. Remember that these devices have 1136 pixels height, but in terms of CSS pixels (independent resolution pixels) we are talking about 568 pixels-heightas these devices have a pixel ratio of 2.

isPhone4inches = (window.screen.height==568);

Using CSS Media Queries and Responsive Web Design techniques,we can detect the iPhone 5 using:

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}

Home Screen webapps

For Home Screen webapps the problem seems important. I’ve reported the problem while in NDA without any answer from Apple yet.

Basically, when you add a website to the Home Screen that supports apple-mobile-web-app-capable meta tag, your webapp works only in iPhone 3.5″ emulation mode (it’s not taking the whole height) as you can see in the following example from the Financial Times webapp.

The letterbox black bars you see here are not a problem in the image. That is how a full-screen webapp is being launched by default on iPhone 5 and the new iPod Touch.

While it’s a good idea to not add more height to a webapp if the OS is not sure about it’s compatibility on a wider screen, as far as I could test, there is no way to define that our webapp is 4″ compatible. I’ve tried as many combinations as I could think about, and if you provide an apple-touch-startup-image of 640×1096, the iPhone 5 takes your splash screen but it’s being resized to 640×920, at least in the Simulator for the GM compilation (almost the final version).


UPDATE 9/20: Solution found, thanks to some guys that were pointing to some solutions I;ve found the trick. As weird as it sounds, you need to forget about the viewport with width=device-width or width=320. If you don’t provide a viewport, it will work properly. The same if you use other properties than width; if you don’t want your viewport to be the default 980px, the way to do it is:

<meta name="viewport" content="initial-scale=1.0">

Even if you use a viewport for an specific size different than 320 letterbox will not be present.

<meta name="viewport" content="width=320.1">

Instead of changing all your viewports right now, the following script will make the trick changing it dynamically:
if (window.screen.height==568) { // iPhone 4"
document.querySelector("meta[name=viewport]").content="width=320.1";
}

The startup image has nothing to do with the letterbox as some developers were reporting. Of course, if you want to provide your launch startup image it has to be 640×1096 and you can use media queries to use different images on different devices. Some reports were saying that you need to name the launch image as in native apps “Default-568h@2x.png” but it’s not true. You can name it however you want. The sizes attribute is completely ignored.

You can use media queries to provide different startup images:

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

If you want to provide an alternative version for low resolution devices then you can use the -webkit-device-pixel-ratio conditional too. If you are wondering why 568px and not 1136px remember that we are using CSS pixels and in these devices the pixel ratio is 2.

The trick is the viewport. Why? I don’t really know. For me, it’s just a bug. But it’s the only solution I’ve found so far.

The other problem is with Home Screen icons that you are already have before buying your new device. iTunes will install the shortcut icon again from your backup and it’s not clear if we are going to have a way to upgrade the compatibility. Even if you change the viewport, if the icon is already installed before the change you will get the letterbox.

iOS 6 and HTML5 development

iOS 6 is available as a free update for every iOS 5 device but not the iPad first generation so we will see this version browsing the web really soon and the iPad market is being fragmented for the first time. The following findings are useful for all iOS devices that are talking the iOS 6 upgrade. As always -and unfortunately- Apple is giving us just partial and incomplete updates on what’s new on Safari and I -as always- enter the hard work of digging into the DOM and other tricks to find new compatibility.

File management

Finally! Safari for iOS 6 supports a file upload input type and with HTML Media Capture partial support.
A simple file upload as the following, will ask the user for a file, from the Camera or Gallery as you can see in the figure. I really like how Safari is showing you screenshots instead of a temporary filename after selecting your image.

<label>Single file</label>
<input type="file">

We can also request multiple files using the HTML5 new boolean attribute. In this case, the user can’t use the camera as a source.
<label>Multiple files</label>
<input type="file" multiple>

We can access the camera and gallery using file uploads

There is no way to force the camera, as using capture=”camcorder”. However, we can specify if we want to capture images or videos only, using the accept attribute.

<input type=file accept="video/*">
<input type=file accept="image/*">

There is no support for other kind of files, such as audio, Pages documents or PDFs. There is no support for getUserMedia for live camera streaming.

What you can do with the image or video after selected?

  • Send it using multipart POST form action (old-fashion upload mechanism)
  • Use XMLHttpRequest 2 to upload it using AJAX (even with progress support)
  • Use the File API that is available on iOS 6 that allows JavaScript to read the bytes directly and manipulate the file client side. There is a good example of this API in action on HTML5Rocks.

Web Audio API

HTML5 game developers should be happy! Web Audio API appears on a mobile browser for the first time. This API allow us to process and synthesize audio on JavaScript. If you have never played with some low level audio, the API may seems a little weird, but after a while is not so hard to understand. Again, HTML5Rocks has a great article to begin with the Audio API.

More information and news on the API on http://www.html5audio.org

Smart App Banners

Website or native app? If we have both, now we can join efforts and connect our website with our native app. With Smart App Banners, Safari can show a banner when the current website has an associated native app. The banner will show a “INSTALL” button if the user doesn’t have the app installed or a “VIEW” button to open it if installed. We can also send arguments from the web to the native app. The case is to open the native app on the same content that the user were seeing on the web site.

To define a Smart App Banner we need to create a meta tag, with name=”apple-itunes-app”. We first need to go and search for the app we have on iTunes Link Maker and take the app ID from there.

<meta name="apple-itunes-app" content="app-id=9999999">

We can provide a string value for arguments using app-argument and if we participate in the iTunes Affiliate program we can also add affiliate-data in the same meta tag.

<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

The banner takes 156 pixels (312 on hi-dpi devices) at the top until the user click on the bottom or on the close button and your website will get the full height for you. It acts like a DOM object at the top of your HTML but it’s not really on the DOM. On iPad -and more on landscape- it seems a little space-wasting.

With Smart App Banners, the browser will automatically invite the user to install or open a native app

During some seconds, the banners shows a “loading” animation while the system is verifying that the app suggested is valid to the current user’s device and App Store. If it’s not valid, the banner hides automatically; for example, it’s an iPad-only app and you are browsing with an iPhone or the app is available only on the german App Store and your account is in US.

CSS 3 Filters

CSS 3 Filters a set of image operations (filters) that we can apply using CSS functions, such as grayscale, blur, drop-shadow, brightness and other effects. These functions will be applied before the content is rendered on screen. We can use multiple filters using spaces (similar to transforms).

You can try a nice demo here. A quick example of how it looks like:

-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

CSS 3 Cross-fade

iOS 6 start supporting some of the new CSS Image Values  standard, including the cross-fade function. With this function, we can apply two images on the same place with different levels of opacity and it can even part of a transition or animation.

Quick example:
background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

Full screen in Safari

Besides the chrome-less home screen meta tag, now the iPhone and iPod Touch (not the iPad) supports a full-screen mode when in landscape. This is perfect for immersive experiences such as games or multimedia apps. There is no way to force full-screen mode and it needs to be launched by the user (last icon on the toolbar). However, we can invite the user to move to landscape first and press on the full-screen icon to activate our app. If we mix this with some touch event handling we can hide the URL bar and provide a good interface until the user escape from the full-screen.

Fullscreen navigation on iPhone and iPod Touch

You will always find two or three overlay buttons at the bottom that your design should be aware of, that’s the back button, the optional forward button and the cancel full-screen.

You can use the onresize event to detect if the user is changing to full-screen while in landscape.

Animation Timing API

Game developers, again, you are lucky. iOS 6 supports Animation Timing API, also known as requestAnimationFrame, a new way to manage JavaScript-based animations. It’s webkit prefixed, and for a nice demo and more detailed explanation check this post from Paul Irish.

CSS Image Set

This is not part of any standard group yet. It’s a new image function, called image-set receiving a group or images with conditions to be applied. The only compatible conditions right now seems to be 1x and 2x for low density devices and high density devices. With this new function we don’t need to use media queries to define different images for different resolutions. The working syntax is:
-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)
It’s working on CSS, such as a background-image. I couldn’t make it work on the HTML side, for the src attribute on an img element or the new proposed picture element. With this new syntax we can have more clear multi-resolution image definition, as we don’t need to use media queries and background-size values.

Passbook coupons and passes delivery

Passbook is a new app in iOS that works as a virtual container for all your passes, ticket, discount coupons, loyalty cards and gift cards. As a web developer you may want to serve the user with a discount coupon, a ticket to an event, an e-ticket for your next flight or a loyalty card.

Apple allow websites to deliver this kind of passes from a website without the need of a native app.

To deliver the pass on your website you just need to use the MIME type application/vnd.apple.pkpass or send it through email

Apple provides a tool that you can install on your server to package and sign customized passes on the fly that may include current user information

To pass file is just a JSON meta-data file and a couple of images. We need to package the file and sign it. Unfortunately, to sign the pass we need a signature from Apple and that means that the web developer needs an iOS Developer Program account ($99/year). If you receive the pass already signed, you can just insert it on your own site.

One of the great features of passes is that once installed you can provide some web services on your end and through Push Notification Services, the operating system will call your web services to update the information on the pass.

More information at developer.apple.com/passbook

Storage APIs and webapp updates

No, there is no new storage API available. There is no support for IndexedDB yet. However, there are some changes you should take in consideration:

  • Application Cache limit was increased to 25Mb.
  • Chromeless webapps (using the apple-mobile-web-app-capable meta tag) now have their own storage sandbox. That means that even if they are served from the same domain, the web app from the Home Screen will have its own persistent Local and SQL Storage. Even if you install the icon many times, every icon will have its own sandbox. While this is good news for apps, it may be also a problem on some apps if you are passing information from the website to the home screen widgets through storage.
    Credits for this finding to George Henne on his post.
  • There is a new undocumented meta tag that can be used on any website (having the apple-mobile-web-app-capable meta tag or not) that allow us to define a different title for the Home Screen icon. As you may know, by default Safari takes the document’s title and crop it to 13 characters. Now we can define an alternative title for the Home Screen using:

<meta name="apple-mobile-web-app-title" content="My App Name">

I’ve also found a meta tag called apple-mobile-web-app-orientations accepting the possible values portrait, portrait-upside-down, landscape-right, landscape-left, portrait-any. Unfortunately, I couldn’t make it work. If you have any luck feel free to comment here.

Web View updates

On Web View (pseudobrowsers, PhoneGap/Cordova apps, embedded browsers) JavaScript now runs 3.3x slower (or let’s say that Nitro engine on Safari and Web apps is 3.3x faster). Be careful about the 3.3x, that is just the different of running SunSpider on the same device, on Web View and Safari. However, SunSpider is not covering all possible kind of apps and your total rendering time is not just JavaScript, so this doesn’t mean that your app runs 3.3x slower.

We can find some other good news:

  • Remote Web Inspector for webapp debugging
  • A new supressesIncrementalRendering Boolean attribute that can eliminate the partial rendering mechanism. I believe this feature is useful to reduce the perception of loading a web page instead of being an app.
  • A new WebKitStoreWebDataForBackup info.plist Boolean feature where we can define that we want localStorage and Web SQL databases to be stored in a place to be backed up, such as in iCloud. This problem has appeared in iOS 5.01, now it’s solved
  • Changes in the developer agreement: it seems that the restriction of using only the native WebView to parse HTML and JS has gone. It will be good if someone from Apple can confirm this. The only mention to the internal WebKit engine is that it’s the only engine capable of downloading and execute new code, while in the same app expected behavior; that’s the anti-Chrome statement. You can use your own engine but only if you are not downloading the code from the web. This may be opening a door… such as delivering our own engine, for example, with WebGL support.

Remote Debugging

I’m keeping this topic at the end. Because it’s a huge change for web developers. For the first time, Safari on iOS includes an official Remote Web Inspector. Therefore tools, such as iWebInspector or Weinre will become obsolete since this version. The Remote Debugger works with the Simulator and with real devices via USB connection only.

To start a remote inspection session you need to use Safari 6 for desktop. Here comes the bad news: you can only debug your webapp on a Mac desktop computer. It was a silent change, but Safari for Windows is not available anymore, so it’s stuck in 5.x. Therefore, only with a Mac OS computer you can make web debugging session on your iOS devices (at least officially for now).

For security reasons, you need to first enable the Web Inspector from Settings > Safari > Advanced. The new Inspector means that the old JavaScript console is not available anymore.

You can start a debugging session with:

  • A safari window on your iOS device or simulator
  • A chrome-less webapp installed on your iOS device or simulator
  • A native app using a Web View, such as Apache Cordova/PhoneGap apps.

When talking about native apps, you can only inspect apps that were installed in the device by Xcode (your own apps). Therefore, there is no way to inspect Google Chrome on iOS websites for example.

If you are used to the Webkit Inspector -Safari 5 or Chrome-, you are going to see a completely redesign version of the inspector in Safari 6 based on Xcode native development UI. You will be lost for a while understanding the new UI. With the inspector session, you can:

  • See and make live changes on your HTML and CSS
  • Access your storages: cookies, local storage, session storage and SQL databases
  • Profile your webapp, including performance reports for Network requests, Layout & Rendering and JavaScript and events. This is a big step in terms of performance tools.
  • Search on your DOM
  • See all the warning and errors in one place
  • Manage your workers (threads)
  • Manage JavaScript breakpoints, and define Uncaught exception breakpoint.
  • Access the console and execute JavaScript
  • Debug your JavaScript code
  • Touch to inspect: There is a little hand icon inside the inspector that allows you to touch on your device and find that DOM element on the inspector.

Well done Apple, we were waiting for this on iOS for long time. Apache Cordova users should be also happy with this feature.

Other smaller updates

  • Apple claims to have a faster JavaScript engine. And it seems to be true. On the SunSpider test I’m receiving 20% improvement on JavaScript performance on the same device with iOS 5.1 and iOS 6.
  •  Google Maps is not available anymore on iOS 6; Now http://maps.google.com redirects to the Google Maps website and not the native app. there fore there is a new URL scheme, maps, that will open the native new Maps applications. The syntax is maps:?q=<query> and query can be just a search or latitud and longitude separated by comma. To initiate a route navigation, the parameters are: maps:?saddr=<source>&daddr=<destination>.
  •  XHR2: Now the XMLHttpRequestProgressEvent is supported
  • The autocomplete attribute of the input is officially in the DOM
  • Mutation Observers from DOM4 are now implemented. You can catch a change in the DOM using the WebKitMutationObserver constructor
  • Safari no longer always creates hardware-accelerated layers for elements with the -webkit-transform: preserve-3d option. We should stop using it for performance techniques.
  • Selection API through window.selection
  • <keygen> element
  • Canvas update: Now the createImageData has one parameter and now there are two new functions that the name suggest to be prepared to provide High Resolution images webkitGetImageDataHD and webkitPutImageDataHD.
  • Updates to SVG processor and event constructors
  • New CSS viewport related measures: vh (viewport height) vw (viewport width) and vmin (minimum between vw and vh)
  • CSS3 Exclusions and CSS Regions were available on beta 1 but they were removed from the final version. It’s a shame although they were too new and not mature enough.
  • iCloud tabs. You can synchronize your tabs between all your devices, including Macs, iPhones and iPads. So the same URL will be distributed through all devices. Be careful on your mobile web architecture!

What we are still waiting for

There are a couple of things that we still need to wait for a next version, such as:

  • IndexedDB
  • FileSystem API
  • Performance Timing API
  • WebRTC and getUserMedia
  • WebGL -still there and still disabled-
  • Orientation Lock API for gaming/inmersive apps
  • Integration with Facebook and Twitter Accounts native APIs, so we can use current OS user’s credentials automatically instead of forcing the user to log in again.

Final Thoughts

Safari on iOS 6 is a big step for HTML5 developers; debugging tools, new APIs, better JavaScript performance. However, I must say that Apple is still forgetting about documentation updates and properly communication with web developers. There are almost no answers on the discussion forum, no updates on the Safari documentation (some docs are really too old right now).

I believe Apple must do a better job supporting web developers. 

Did you find any other new stuff? other problem or bug? Anything else you were waiting for? Feel free to comment in the section below or contact me by twitter.

 

Share

Tags: , , , ,

Loading Facebook Comments ...
  1. #1 written by Josef Richter September 19th, 2012 at 17:30

    Does it allow you to select the size of the image you want to upload using the file input? Coz usually the fullsize from iPhone camera is quite huge and not necessary. Thanks.

    RE Q
  2. #2 written by firt September 19th, 2012 at 17:37

    I couldn’t find any way to that using markup. However, you can use the File API, read the photo with JS, resize it client-side (there are some libraries and I’m pretty sure we are going to see more now) and upload it.

    RE Q
  3. #3 written by Jason Grigsby September 19th, 2012 at 17:44

    @firt wrote:

    “If you are using Responsive Web Design you should not have too much trouble as usually, RWD techniques are using the width and not the height for conditionals.”

    There is a chance that responsive designs may have trouble if they designed their breakpoints based on common device resolutions.

    We’ve been advising people to base breakpoints on the content, not device sizes, but I’ve seen many examples where designers have created a breakpoint at 480px to switch to the “mobile” design. These breakpoints won’t apply to the iPhone 5 in landscape mode.

    One of the things I’m most thankful about the new iPhone 5 is that it finally breaks people of the habit of thinking that 320×480 equals mobile.

    RE Q
  4. #4 written by firt September 19th, 2012 at 17:49

    @ Jason Grigsby. You are totally right. As far as I could test, the iPhone 5 on landscape has the same viewport “bug/behavior”, so if you don’t add any polyfill you still get a 320px viewport on landscape (quite awful really)

    RE Q
  5. #5 written by Michael Mullany September 19th, 2012 at 19:27

    Quick note on CSS filters – the option to reference an SVG filter within a CSS filter isn’t implemented yet.

    RE Q
  6. #6 written by Hugh Isaacs II September 19th, 2012 at 20:56

    Seeing as Safari 6 on Mountain Lion has it, I was hoping to see the Web Notifications API supported in here.

    RE Q
  7. #7 written by firt September 19th, 2012 at 20:58

    @ Hugh Isaacs II When your tab/window is not on foreground and when Safari is closed/minimized, your JavaScript code can’t be executed. Therefore, having a Web Notifications API there doesn’t seem useful for now.

    RE Q
  8. #8 written by Duncan Wilcox September 19th, 2012 at 21:48

    RE Q
  9. #9 written by firt September 19th, 2012 at 21:50

    Thanks. I’ll test that. Regarding the use of sizes and the media attribute I’ve tried and it didn’t work. I didn’t try with the “expected” filename.

    RE Q
  10. #10 written by Sten Hougaard September 19th, 2012 at 21:53

    Hi,
    Great post – I have another example of use of CSS3 filters here: http://dl.dropbox.com/u/3260327/angular/CSS3ImageManipulation.html
    /Sten

    RE Q
  11. #11 written by Marek September 19th, 2012 at 22:48

    There seems to be a longer onclick delay (like 500ms or more).
    You can see it clicking on links vs clicking on form buttons.
    Any ideas how to fix it without resorting to hacks with ontouchend?

    Also, elements with onclick handlers (like table rows or buttons) don’t get highlighted when you touch them down for clicking.

    RE Q
  12. #12 written by Matt CG September 20th, 2012 at 00:24

    I can confirm that the following markup prevents letterboxing of web apps, having just tried it:

    Thank you Duncan for pointing me to that.

    RE Q
  13. #13 written by RunningTurtle September 20th, 2012 at 09:31

    “A big step forward” … and several backwards !!!

    Just wasted several hours with a new Safari “feature” that seems to automatically cache every ajax call (not documented anywhere)

    Struggling now with window resize event being apparently fired when filling forms …

    Let’s face it, Apple is doing a very bad job with safari, does not allow other browser vendors to push browser innovation on its ios platform (cf chrome on ios), and does not seem to give a sh*t about helping web developers.

    Reminds me of the time when the dominant company was Microsoft and the way they handled browser innovation …

    RE Q
  14. #14 written by bruno herrera September 20th, 2012 at 09:45

    Great article! What do you think about html5&css3 support on Android browsers?

    RE Q
  15. #15 written by firt September 20th, 2012 at 15:09

    About the letterbox solution, please check the update on this post http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers#updatewebapps

    RE Q
  16. #16 written by Jan September 20th, 2012 at 16:20

    Hi,
    “A safari window on your iOS device or simulator”
    does not work for me (Lion > Safari6 && iPad3)
    the desktop Safari sees iOs only if I send the page to Home Screen.

    Someone else having the same issue ?

    RE Q
  17. #17 written by Jared S September 20th, 2012 at 18:06

    Can you elaborate more on the enhancements to the window.selection API?

    RE Q
  18. #18 written by Chris C September 21st, 2012 at 05:45

    I have a jqTouch website that uses HTML5, CSS and jQuery. When I upgraded to iOS6 after my splash screen shows and the app loads the main panel is only partially shown (happens in Safari and also for Home Screen mode).

    If I rotate the device then all is OK until I close the app down. Then I have to rotate the device to refresh it.

    Interesting the same behavior appeared when I tried it under Chrome on Windows 7. In that case since I cannot rotate the device I just minimized and then restored the browser and it repainted everything correctly.

    RE Q
  19. #19 written by Björn Kaiser September 21st, 2012 at 09:45

    As far as I know, the build number of iOS 6 for the iPhone 5 and iPod Touch 5th Gen. is different to the build number of iOS 6 for the other devices (10A403 vs. 10A405 for iPhone 5/iPod Touch).

    The UA string you posted contains this build number, don’t know if this will stay in effect for future iOS versions but for now this should work to detect the iPhone 5 server-side.

    RE Q
  20. #20 written by MrBester September 21st, 2012 at 09:51

    If you think that having to connect via USB (and only if you’re on a Mac and using Safari to boot) to do remote debugging renders Weinre obsolete then there’s something wrong with you.

    RE Q
  21. #21 written by Jianrong Yu September 21st, 2012 at 10:10

    I have some discoveries on the very-large image support in new iOS6.

    On iOS5, any GIF, PNG, or TIFF with more than 3 megapixels (3*1024*1024) cannot be loaded in safari.
    On iOS6, the threshold had been increased to 5 megapixels.

    And on iOS5 any jpeg with more than 2 megapixels (note: the resolution of the new iPad is larger than 2 megapixels!) will be subsampling up to 16x to be less than 2 megapixels (and the height/width of the image element will be decreased too, you will get a 512×1536 image element when you load a 1024×3072 jpeg image).
    On iOS6, the threshold had been increased to 5 megapixels, and the size will not decrease anymore (although the image is still subsampled).

    RE Q
  22. #22 written by firt September 21st, 2012 at 13:38

    @Chris C May developers are reporting overflow problems on redrawing operations. Try this solution http://www.tonylea.com/2010/safari-overflow-hidden-problem/

    RE Q
  23. #23 written by firt September 21st, 2012 at 13:41

    @MrBester There is something wrong with me, that’s why I’m answering you after being so unprofessional with your comment. Weinre will become obsolete. If you are on Windows/Linux it’s still useful but I’m pretty sure that’s something that is going to change soon. Weinre (as well as other solutions) are just hacks to solve the lack of official inspector. When the official inspector is there, there is no reason to use a hack that is is not the best solution (you are injecting a JS, don’t have JS debugging tools, no performance tools, etc.)

    RE Q
  24. #24 written by longtail September 21st, 2012 at 13:41

    @RunningTurtle there are some good folks cobbling together some info in the ajax caching: http://stackoverflow.com/questions/12506897/ios6-safari-caching-ajax-results/

    RE Q
  25. #25 written by Kimmo Puputti September 21st, 2012 at 14:14

    We also noticed that -webkit-overflow-scrolling: touch; doesn’t seem to randomly break anymore as in iOS 5. Needs further testing, though.

    RE Q
  26. #26 written by Richard Haber September 21st, 2012 at 15:32

    I have noticed that jquery $(element).html(‘new content’) type updates where the new content is coming via websockets are causing screen flashing that is not visible in iOS 5.

    RE Q
  27. #27 written by Sean September 21st, 2012 at 17:32

    Something I haven’t seen mentioned is the removal of mouseover simulation. I have seen some web developers complaining about the functionality (see: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/), but the reality is that the removal of this will break a lot of websites that have dropdown menus that show up on mouseover.

    It can be argued that developers shouldn’t rely on this, but it’s still quite annoying for a new release to break a convention that has been part of iOS from the beginning without any mention of the change to developers.

    Another change I noticed: I am using Prototype JS Event.Morph to perform some CSS transitions. These transitions were smooth as butter under iOS 5, but choke and are almost worthless under iOS 6.

    This, combined with the complete lack of inspection tools for windows developers, is a huge turnoff. Not everyone is developing an app or web app, or wants to have to address the Apple ecosystem – some of us just want our websites to work smoothly with minimal adjustments – and Apple has taken a step backward with this release.

    RE Q
  28. #28 written by Chris C September 21st, 2012 at 17:33

    Unfortunately the position: relative did not help here. One problem with CSS is there is no debug or error checking so perhaps I have a CSS problem further up the chain that IOS6 exposes?

    RE Q
  29. #30 written by firt September 21st, 2012 at 20:43

    Thanks @Felipe for the update! it seems both http://maps.apple.com and maps:// are supported. It seems Apple it’s suggesting the first one, so you can just change maps.google.com with maps.apple.com in your current websites.

    RE Q
  30. #31 written by Sean September 21st, 2012 at 20:45

    A quick example of a formerly beautiful CSS transition that chokes on iOS6: http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/

    RE Q
  31. #32 written by Chris C September 22nd, 2012 at 15:40

    My problem was CSS. I hide all my list content using display:none; until I can confirm the user and their state during my load routine. This worked fine prior to iOS6. If I don’t hide the list items then I don’t exhibit the panel drawing problem at load time.

    I will have to do some experimenting to see how to get around this.

    RE Q
  32. #33 written by Daryl September 22nd, 2012 at 19:27

    I am not clear on how to use the onresize event to detect if the user is changing to full-screen. Can you go into more depth on that?

    RE Q
  33. #34 written by Chris C September 22nd, 2012 at 22:07

    I found a workaround to my problem by Googleing webkit refresh problems.

    One lucky person accidentally came up with a work around by adding an empty <style> after the place that the error appeared in.

    Worked great for me. Now I can go back and start playing with some of these new iOS6 features like the camera and audio inputs :-)

    RE Q
  34. #35 written by Albert September 23rd, 2012 at 13:41

    Can anybody give me a hint where to put that “supressesIncrementalRendering”? Haven’t found it anywhere else.

    RE Q
  35. #36 written by firt September 23rd, 2012 at 14:37

    RE Q
  36. #37 written by Albert September 23rd, 2012 at 19:41

    Thanks. Though it doesn’t help me with my problem in the WebView: When scrolling (especially when the div is bouncing) there is some flickering (parts of the page are shown where they don’t belong for some milliseconds). Didn’t happen in iOS 5. Anybody else has this problem?

    “-webkit-overflow-scrolling: touch” problems seems to be fixed in iOS 6.

    RE Q
  37. #38 written by Bart September 24th, 2012 at 13:34

    I develop a webapp for ipod touch / ipad and I just updated an ipad3 to iOS6. Any way I can get debug information from safari as the debug console has been removed and I do not have a Mac.

    RE Q
  38. #39 written by Albert September 24th, 2012 at 16:16

    RE Q
  39. #40 written by Nick Burch September 24th, 2012 at 18:38

    Any idea why a web app (JQTouch based) when added to home screen would be about 4x as slow to load as if you visit directly through Safari?

    I know that nitro JS used to be unavailable to web apps but I thought this was corrected as of iOS5… Is this “bug” back in iOS6? And/or is it somehow similar to the Phonegap/Cordova 3.3x slowness mentioned above? I am NOT using PhoneGap/Cordova FYI.

    RE Q
  40. #41 written by Albert September 24th, 2012 at 20:50

    WebView is 3.3x slower to nitro but because nitro is faster in iOS6, too, the iOS6 WebView is in fact a little bit faster as in iOS5. But not fast enough to feel it I guess.

    RE Q
  41. #42 written by Chris C September 25th, 2012 at 03:33

    Nick: My jqTouch iPhone app takes 7 seconds to load in native safari and 10 seconds as a home screen app in iOS6. I am loading a lot of libraries etc and I think thats pretty good plus it has to load a splash page on the home screen version.

    I also note that if the user exited to the home screen while my app was still active it only takes 7 seconds to initialize it on reload, the same time as the safari instance.

    RE Q
  42. #43 written by chris September 25th, 2012 at 09:51

    Max,

    The FT Web App you’re running via the shortcut must have been copied over from the iCloud (backed up from your old iPhone 4) – the shortcut would have included fixed dimensions from your previous device – hence the black borders.

    On your iPhone 5, go to app.ft.com and add a new shortcut – problem solved. You will now have a full-screen web app compatible with your new iPhone 5

    RE Q
  43. #44 written by firt September 25th, 2012 at 12:02

    Chris,

    No, the app.ft.com icon was not copied from iCloud. You have that problem if you don’t upgrade your code. The FT team has upgrade their code to support the iPhone 5 with the hack/trick that is mentioned in the post.

    RE Q
  44. #45 written by toni September 26th, 2012 at 10:29

    I found out that iOS 6 changed something, that affects how video is being played back in Safari. Suddenly my embedded video has the play button only and now controls for playback or fullscreen are shown after that. Also my embedded subtitles started to work differently. So annoying! You can seet it yourself with the website provided. :/

    RE Q
  45. #46 written by Cedik September 27th, 2012 at 15:12

    I can’t say much about the javascript speed in iOS6, but the image rendering seems to better.
    I’m working on a HTML5 app and doing some zooming with CSS3’s transform. We have some problems with the images on iOS5 because the text is blurry after the scaling, a known webkit issue. But the same images appear very clear on iOS6.
    I’m not completely sure about this though, we don’t have a 3GS with iOS6 yet (only 5), all our tests were on the simulator but from my experience the simulator’s Safari is was pretty much like the one on the actual device

    RE Q
  46. #47 written by Matt September 28th, 2012 at 10:08

    My iPhone 5 UA contains Mobile/10A405 (matching the version under settings->general->about) compared to 10A403 on the iphone 4. Looking like the iPhone 4S would be 10A404? I don’t have a large amount of devices to test this, but would this be a good way to detect specific iPhone (coupled with IOS detection perhaps?)

    RE Q
  47. #48 written by Tisten October 2nd, 2012 at 10:06

    Since IOS6 geolocation fails when ran from the home screen. I did plenty of tests and it seems like Apple prevents apps from fetching gps coordinates in full screen mode. Even Google didn’t find a solution yet as they left fullscreen mode for their web app.

    RE Q
  48. #49 written by firt October 2nd, 2012 at 12:45

    @Tisten, as fas as I remember, Google Maps have never included the mobile-web-app-capable meta tag (fullscreen mode).

    I’ve just ran a quick test and it seems you are right. The geolocation API asks for permission for the “Web” app and you never get a position. It’s working on the simulator but not on the real device. When you close the app and open the app again (you already have geolocation permissions) it seems to work once -it located me one time only-. After that, it’s the problem again; iIt’s not even generating a timeout error. The geolocation icon on the status bar is shown. Same HTML on Safari works properly.

    RE Q
  49. #50 written by pillar15 October 18th, 2012 at 13:30

    Web Inspector support is very nice, however it only recognizes safari as supported app and shows the tabs. You mentioned that it supports phonegap/cordova as well – is something extra needed for that?

    RE Q
Comment pages

SetPageWidth