CSS not rendering correctly on iOS 7.x when I use 'vw' metric with Ionic (PhoneGap)

Question

I'm making an app using Ionic Framework, which is based upon PhoneGap.

I'm using 'vw' metric for several properties to make them resizable for all the devices, either iOS or Android. When I run on my browser with the 'ionic serve' option and the iOS Simulator for the 8.1 version I get the expected result, but when I run on iOS 7.1 Simulator, all the - and ONLY the - border related properties don't get rendered.

Any idea on how to solve this?

Thanks!

Answer 1

Viewport units doesn't work well on iOS 7 caniuse.com

Partial support in iOS7 is due to buggy behavior of the "vh" unit.

known issues:

1. Chrome does not support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34.
2. iOS Safari (both 6 and 7) does not support viewport units for border widths, column gaps, transform values, box shadows or in calc().
3. iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.
4. Internet Explorer 9 in print-mode interprets vh as pages. 30vh = 30 pages
5. iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.

More info about the buggy behavior

http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html

And a polyfill https://github.com/rodneyrehm/viewport-units-buggyfill