Mobile Zone is brought to you in partnership with:

Mobile and web 2.0 developer, consultant and speaker. Author of "Programming the Mobile Web" book, published by O'Reilly in 2010. Forum Nokia Champion. Maximiliano is a DZone MVB and is not an employee of DZone and has posted 34 posts at DZone. You can read more from them at their website. View Full User Profile

Safari on iOS 7 and HTML5: Problems, Changes and New APIs

09.24.2013
| 45693 views |
  • submit to reddit

CSS Support

In terms of new specs supported (mostly webkit prefixed) we have:

  • Sticky Position
  • CSS Regions
  • CSS Grid Layout (not working)
  • CSS FlexBox
  • Dynamic Font types

Sticky Position

Sticky position is a new experimental feature that allows us to fix an element to the viewport, but only when it’s off the visible area (usually after a scrolling action). It’s like mixing position: static with position: fixed when the static position moves the element outside of the visible viewport. If you have more than one sticky element, they will all accumulate in the same area--defining the same position properties--which creates a nice effect while scrolling. It is similar to native UITableView sections.

UPDATE 19/9: Some reports indicate that this feature was available on 6.1 as well (but the community didn’t get it, so I’ll keep it here).

h1 { position: -webkit-sticky;   top: 10px; }

You can try a demo.

sticky

CSS Regions

With CSS Regions--spec proposed by Adobe--we can create magazine-like designs to flow content through different containers. Because of the nature of the screen size, we’ll use this new flow mechanism more on iPad websites and web apps.

Selecting content flowing into different regions is not allowed on iOS. CSS Exclusions, a way to define shapes for regions, usually coming as a Regions companion, is not available yet.

You can try some online demos.

CSS Grid Layout

CSS Grid Layout is another new layout spec from the W3C (proposed by Microsoft and already available in IE10). All the new CSS properties (-webkit-grid-X) are available, but I couldn’t enable using display: grid or display: -webkit-grid. I’m not sure if there is a different way to enable it, or if it’s not ready yet.

CSS FlexBox

The final spec for CSS FlexBox is finally here and it allows us to stop insulting floats and clear everywhere to layout elements horizontally and/or vertically. To use it, we should use display: -webkit-flex to a container and apply different properties available

Dynamic Fonts

Dynamic fonts are a new font type available in iOS 7 that adjust weight, letter-spacing and leading based on current font size to improve legibility. We can take advantage of this new feature from HTML, using new -apple- prefixed constants (maybe because webkit is not going to use prefixes in the future). We have a big list of constants, such as -apple-system-headline1, -apple-system-body and -apple-system-caption1.

h1 { font: -apple-system-headline1 }
p { font: -apple-system-body }

Other CSS Improvements

There is no good news for media queries, as the resolution attribute is still not supported. Well, there is something new, such as the ability to query on min-color-index and max-color-index that is completely useless. :)

We also have some minor updates, including:

  • Unprefixed CSS Transitions (and the transitionend event)
  • CSS Clip Path to clip contents based on shapes, including circle, rectangles and polygons
  • Kerning and Ligatures on fonts are enabled by default
  • Background properties now gets more compatibility with different values
  • box-decoration-break: slice/clone
  • tab-size style
  • overflow-wrap: normal/hypernate/break-word
  • support for the units ch and vmax
  • mask-type: alpha
  • new ::cue pseudo-element already covered in the video track section
  • New -webkit-background-composite property (but I couldn’t make it work)

Home-screen Web Apps

If you are using Home Screen web apps, I have bad news for you: Too many bugs are around this platform in this version.

The only good news is now it seems we don’t have any limits for WebSQL Storage when in full screen; we don’t need the user’s permission.

Big Issues

There are some big issues on home-screen web apps:

  • Standard dialogs are not working at all, such as alert, confirm or prompt.
  • Web apps can’t open an external URI, such as a website in Safari, make a call, open AppStore, etc. Any URI is just ignored.
  • If you install more than four apps, the home screen will do strange things, such as replacing one web app with another one. You will start seeing clones of the same web app. The same happens when you open different web apps at the same time. Just try it on your device: go to app.ft.com, install the web app; go to pattern.dk/sun, install the web app; repeat the operation several times and you will see the mess on your home screen. Restarting the device seems to solve the problem.
  • When in portrait mode with a text input, a select or a date picker in focus, media queries will honor orientation: landscape and the resize event will fire. This behavior (bug?) happens on home screen web apps and Web Views, but not on Safari.
  • UPDATE 19/9: If you are using Application Cache and also managing states through hash or other techniques, the history object will not keep your navigation history, so history.back() will never work and history.length stays in 1 forever. Thanks to the more than 10 people who reported this problem!
  • UPDATE 19/9: Cookies are not transferred between your website and your web app when installing the icon on the home screen (for authentication purposes for example). It was working until 6.1, and now it’s not working anymore (Thanks Joseph Pearson for reporting this; see a test suite here).

Status Bar

If you don’t provide any apple-mobile-web-app-status-bar-style meta tag, or if you provide one with the default value, the status bar will become black over black, so … just a black area on the screen (on some devices you will see just the battery icon). The user will not see the clock and all the other icons on the status bar.

The black value works OK, but it’s not in full mode as in the new iOS 7 style. Lastly, If you are defining the apple-mobile-web-app-status-bar-style as black-translucent, it’s not black-based anymore, it’s just fully transparent following the new iOS full-screen mode for apps (previous image, at the right). Unfortunately, it seems there is no way to define whether our background is clear or dark, so we need to test what the icons and clock look like over our background. UPDATE: The text seems to be always white.

In the next picture, you can see the default status bar -- the black value and the black-translucent value in action on iOS7.

statusbar2

Launch Image and Multitasking

For the new multitasking system, when using a home screen web app, the system uses a white image for the preview, not the launch image or current status of the app. The only exception is when the web app is still the active app where you see the right snapshot. In the next example, we can see the Financial Times web app with a white snapshot even with a correct Launch image and an active execution.

multitask

Luckily, we no longer have the iPhone 5 home screen web app bug that was letterboxing the app (a year after it was found). We don’t need the viewport hack solution anymore.

Native Web App Development

If you are developing hybrids (native web apps), such as Apache Cordova (PhoneGap) apps, there is some news for you. First, no Nitro engine yet.

Paginate Mode

When using UIWebView for rich content in native apps or for native web apps (hybrids), we can now use a Paginate feature for an ebook reading experience without vertical scrolling (a la Windows 8 app experience). This feature is perfect for an app showing dynamic content, which we can’t pre-optimize for pagination. We have different Objective-C properties to configure the pagination process. To enable it, we need to use something like:

myWebView.paginationMode = UIWebPaginationModeLeftToRight;
myWebView.paginationBreakingMode = UIWebPaginationBreakingModePage;
myWebView.gapBetweenPages = 50;

These properties will convert any HTML document in the web view to pagination mode (divided horizontally in pages).

Other Improvements

  • For native development--not necessarily using Web View--the iOS SDK now includes a JavaScript runtime: JavaScript Core framework providing wrapper Objective-C for standard JavaScript objects. We can use this framework to evaluate JavaScript code and also parse JSON.
  • With a new property of the Web View, we can now have an inline playback mode for HTML5 video instead of the default full screen mode.
  • With a new property of the Web View, we can enable autoplay for video when in a native web app.
  • There is also a SafariServices Framework, which on iOS 7 is useful to programmatically add URLs to the Safari reading list.

Remote Debugging

If you have MacOS and you are used to remote debugging your iOS, you must update Safari to version 6.1 and iTunes to version 11.1 to have the ability to communicate with an iOS 7.0 device. At the time of this writing, Safari 6.1 is only available as a Preview.

While the abilities of the debugger are the same as in the previous version, the user interface has changed a lot with a much cleaner design.

Screen Shot 2013-09-18 at 4.02.56 PM

Not There Yet

While the list is long, in this case I will list features that were announced for Safari 7 for Mac but are not there on Safari on iOS:

  • Web Speech API is present, but not working on iOS.
  • Push Notifications from websites would be a great addition to iOS, but will only be on Mac OS.
  • Background Blend mode is not present on iOS.
  • Grid Layout is present, but not working on iOS.

Anything Else?

Most of the bugs and problems in this post were posted a few months ago in the private forum, and a lot of people have sent bug reports and asked desperately on the forum for a solution. I can’t believe that Apple can’t give answers to web developers and its not even executing some basic test suites to detect some API bugs.

Did you find any other API or support? Any other bugs? Feel free to add your comments below using any of the options available.

Published at DZone with permission of Maximiliano Firtman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)