App style in pure CSS3 breaks while running on Android

Question

I’m making an app with Cordova + Sammy.js and CSS3 pure. I can make the app perfectly responsive and with all styles working on Chrome and Firefox.

It turns out that when I "build" on Ordova and open APK on Genymotion (running Android 4.4 +) 50% of styles break....

Things like container font size are not rendered in vw, some containers simply have their widths ignored and follow the default width (100% parent).

I want to know if there is any way (framework, library, engine or Preprocessor) that gives to fix the styles of the APP but allowing the same flexibility stylization of pure HTML5.

Answer 1

Reported: Units of measurement with View-port percentage

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

Some points to consider

• It is not because a property is "thrown" that all rendering engines will be able to support it. When a new "functionality" is standardized by W3C (I believe they are currently defining CSS as well as HTML properties) all modern browsers will be able to support immediately. There are several functionalities not yet implemented and even if implemented they can cause BUGS.

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

• It is not because a new CSS property has been released that browsers will support in the same version as they are, that is when the support browser will be released a new version and you will have to do the "update".

• As well as the browsers WebView uses a web engine, this engine is usually harder to update than a browser, in many cases depending on the version of the API may not even use more modern features.

This is the case for units of measures vh, vm, vmin and vmax which are probably not yet fully supported.

Note: In addition to the units of measurements, other CSS properties may not be supported and may cause problems you don’t know about (in addition to those you’ve already noticed).

Viewport measurement units 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+

As the list, Android only supported 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 superior.

Known bugs

• Chrome does not support viewport drives for width border, column-gap, values of transform, box-shadow or calc()
• Safari and iOS Safari (both 6 and 7) do not support viewport drives for width border, columns gaps, values of transform, box-shadow or calc()
• iOS 7 Safari sets the unit value of the viewport to 0 if the page has left the page and returned after 60 seconds.
• iOS 7 Safari recalculates widths set 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 is a unique project to fix problems in 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>
<div id="test">test</div>

Answer 2

That project provides a separate Webview for Android that contains the most up-to-date Chrome features. On it is possible to run recent Chrome Features for any Android version above 4.0.