Safari on iOS is the most complex mobile browser at the time of this writing. As mentioned in Chapter 7, from version 2.0 of iOS it supports a great (and strange) group of CSS extensions that allow us to use hardware-accelerated animations, transitions, and even 3D effects in our websites. Some of these extensions also work with the Android and webOS browsers, depending on the operating system version.
Many CSS attributes accept a function as a parameter. These functions are WebKit extensions and are all hardware-accelerated.
The gradient-related functions listed here are not officially supported in iOS, according to the Safari Reference Library. However, they work properly from OS 3.0, and on older devices they will just use a plain background.
The functions available for iPhone devices are listed in
Table 9-7 (there are others,
but they work only in Safari for desktop). Some of these functions, such
rotate, are also available for the Android and
Table 9-7. CSS functions available in Safari on iOS
Specifies a cubic bezier timing function.
Specifies a matrix transformation of six values with two translation elements.
Specifies a 3D matrix transformation of 4×4.
Maps a viewing cube onto a pyramid whose base is far away from the ...