App style in pure CSS3 breaks while running on Android

  

Reported: Measurement units with View-port percentage

There are many CSS properties not yet implemented by all browsers, especially mobiles.

Some points to consider

• It's not because a property is "released" that all rendering engines will be able to support them. When a new "feature" is standardized by W3C (I believe they are currently defining CSS properties as well as HTML) that all modern browsers will be able to support immediately. There are several features that have not yet been implemented, and even if implemented, they can cause BUGS.

• Just because W3C has defined that a new functionality should work in a way, does not mean that all browsers will have the same "code" in their structure that will also run the process. What I mean by this is that many properties per rendering engine are subject to BUGs.

• It is not because a new CSS property was launched that browsers will support in the same version they are in, ie when the browser supports a new version will be released and you will have to do the "update" p>

• Just like browsers WebView uses a web engine, this engine is usually harder to update than a browser, in many cases depending on the API version you may not even be able to use more modern features. >

This is the case of the units of measurement vh , vm , vmin and vmax that are probably not yet fully supported.

Note: In addition to the units of measure, other CSS properties may not be supported and may cause problems you do not know (other than those you have noticed).

Viewport Measurement Support: vw, vh, vmin, vmax

• InternetExplorer 9+ to 11 (Partial support)
• Firefox 34 +
• Chrome 31 +
• Safari 7.1 +
• Opera 26 +
• iOS Safari * 7.1 +
• Opera Mini * 8
• Android Browser * 4.4 +
• Chrome for Android 40+

According to the list, Android only happened to support view-port units in version 4.4, in other words, I believe that your application (which uses webView) will only run API Level 19 or top.

• Chrome does not support viewport units for width of border , column-gap , values for transform , box-shadow or calc()
• Safari and iOS Safari (both 6 and 7) do not support viewport units for width of border , columns gaps, transform , box-shadow or calc()
• iOS 7 Safari sets the viewport's drive value to 0 if the page has left the page and returns after 60 seconds.
• iOS 7 Safari recalculates widths defined in vh as vw and heights defined with vw as vh , when orientation changes.
• Internet Explorer 9 in print-mode interprets vh as pages. 30vh = 30 pages

Workaround

There is a project called Viewport Units Buggyfill ™ that can help you.

Although it's an exclusive project to fix issues with Safari for iOS, it supports IE9 + and I believe it helps with WebKit (in your case WebView) for Android as well.

Solution with Jquery

In the SOen there is an answer with a solution that uses Jquery, example (The process is manual):

/*
 * CSS viewport units with jQuery
 * http://www.w3.org/TR/css3-values/#viewport-relative-lengths
 */
;(function( $, window ){

  var $win = $(window)
    , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/[\d.]+/)[0] / 100
      , unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this
      , update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update ).resize();
    return update();
  };

}( jQuery, window ));

// Usage:
$('#test').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

$(window).resize(function() {
  $('#test').css({
    height: '50vh',
    width: '50vw',
    marginTop: '25vh',
    marginLeft: '25vw',
    fontSize: '10vw'
  });
});

#test {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="test">test</div>

This project provides a separate WebView for Android that contains the most up-to-date features in Chrome. Here you can run recent Chrome features for any version of Android above 4.0.