CSS translation using vw not working on iOS <8, workaround?

Question

Obviously, doing transform: translate with vw units doesn't work on iOS <8.

Here's a demo comparing translate%, which works on both mobile and non-mobile, and vw, which works only on iOS 8+ and doesn't support:

http://codepen.io/rachel-carvalho/pen/azmoPJ?editors=110

 #p { -webkit-transform: translate(10%, 0); transform: translate(10%, 0); } #vw { -webkit-transform: translate(10vw, 0); transform: translate(10vw, 0); } 

I do not know if other mobile devices have problems translating vw, but I can not find anything on the Internet about this problem.

I was wondering if anyone else has this problem and if there is a reliable way to detect this behavior, so I can get along with javascript.

Answer 1

I encountered the same problem in the past with vmax, vw for some browsers (especially IE) and found out that it supports, but their partial support, which can sometimes work several times, check here

To do this, you can use the jquery library, which converts vw to px dynamically buggyfill .js

Hope this works for you!