PolymerJS not working on android 4.2.1 and 4.1.2

Question

I am building a mobile application using Polymer. However, it seems that even the shim does not cut it for older versions of the WebKit engine(I have included the platform.js file). Yet, it works great on 4.4.2. Here you can see the difference: https://cloud.githubusercontent.com/assets/2229435/3941834/d74f77b2-2544-11e4-9fde-48dc3dcf5502.png

I debugged the application on the older version and here is what html I have for a core-toolbar and paper-tabs:

<core-toolbar class="medium-short">
    <div id="bottomBar" class="toolbar-tools" center="" horizontal="" layout="">
    </div>
    <div id="middleBar" class="toolbar-tools" center="" horizontal="" layout="">
    </div>
    <div id="topBar" class="toolbar-tools" center="" horizontal="" layout="">
        <span>
                <paper-icon-button icon="menu" role="button" aria-label="menu" tabindex="0">
    <template if="{{raisedButton}}"></template>
    <div id="clip">
      <!-- <div id="focusBg"></div> -->
      <paper-ripple id="ripple" class="recenteringTouch circle">
<canvas id="canvas"></canvas></paper-ripple>
      <div id="content">
        <template if="{{iconSrc || icon}}"></template>
          <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}" aria-label="menu" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></core-icon>

        <template if="{{label}}"></template>
      </div>
    </div>
  </paper-icon-button>
                <div>Title</div>
            </span>
        <paper-tabs flex="" role="tablist">
            <div id="tabsContainer" horizontal="" layout="">
                <core-selection id="selection" multi="{{multi}}" on-core-select="{{ selectionSelect }}" hidden=""></core-selection>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 1</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 2</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 3</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 4</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 5</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <div id="selectionBar" on-transitionend="{{ barTransitionEnd }}"></div>
            </div>
        </paper-tabs>
    </div>
</core-toolbar>

Versus the html from my desktop chrome:

<core-toolbar class="medium-short">
    <span>
        <paper-icon-button icon="menu" role="button" aria-label="menu" tabindex="0"></paper-icon-button>
        <div>Title</div>
    </span>
    <paper-tabs flex="" role="tablist">
        <paper-tab class="pink" role="tab">Tab 1</paper-tab>
        <paper-tab class="pink" role="tab">Tab 2</paper-tab>
        <paper-tab class="pink" role="tab">Tab 3</paper-tab>
        <paper-tab class="pink" role="tab">Tab 4</paper-tab>
        <paper-tab class="pink" role="tab">Tab 5</paper-tab>
    </paper-tabs>
</core-toolbar>

I can see that the shim kickstarted something by creating all these elements, however I think that the ShadowDOM did not work so well as they do not appear to be styled.

Thank you for the help

EDIT: Find the answer below

Answer 1

Just in case somebody is banging his head against such problem: The mobile browser of android is not supported by Polymer, they are planning to, but for now they do not support it. In 4.4 they switched over to Chrome for their WebView, that is why it is working. There is a project called Crosswalk: https://crosswalk-project.org/#documentation/cordova which replaces the WebView with Chrome, so that 4.x versions of android can be supported.