Does't work in stock Andoid < 4.4 Browser ( AppleWebKit/534.30 )

[cmelian]

Hi,
In stock Android browser ( <= 4.3 ) the animation doesn't appear and menu doesn't "open".
Best regards.

[ximini82]

I have the same Issue! The rotating animation of the menue button works, but the other buttons won't appear. With Android 4.1 Cordova. I am using Ionic and I put the mfb nav in the content area:

   <ion-content>
            <ion-list    >

  <ion-item ng-repeat="item in items" >
  </ion-item>


        </ion-list>
 <nav mfb-menu position="br" effect="zoomin" label="Schließen"
     active-icon="ion-close" resting-icon="ion-navicon-round"
     toggling-method="click"  >
  <button mfb-button icon="ion-trash-b" label="Löschen" ng-click="data.showDelete = !data.showDelete;" ></button>
  <button mfb-button icon="ion-document-text" ng-click="createText()" label="Text"></button>


</nav>
    </ion-content>

It works perfect for the Desktop browsers. But not in the cordova webview! I can see the rotation animation of the menue button. But the other buttons will be not displayed.
But if change the state and go back. The Buttons were displayed!

I think it is a rendering problem !

I suggest to use Hardware-Accelerated by using transform 3d. Perhaps i find a way to modify!

[ximini82]

I ve tested a while. I thought css support would be the problem. But I found out that only the Android onboard browser has the problem(its also used in cordova!). With Chrome and its works perfect. In firefox there is strange behavior. I can click it once and the menue opens. But if I click again it not really close it. Only if I change the orientation of the device. The close/open sequence will triggert! And I can see the Animation
It seems that is a similar behavior with the android browser. I only the menue changes if I change the orientation!

Strange!

[cmelian]

It seems to be a repaint issue. I'll do more tests next week.

[nobitagit]

Can't test it right now, but good to know. Keep us posted about your findings. Thanks!

[cmelian]

We have a solution :
Adding to your main CSS :

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }

allows repaint to be done. In pure CSS, without any JS.
The only issue remaining in this case : boutons are not animated. They appear directly

Credits : http://stackoverflow.com/a/20982320

[nobitagit]

Great! Will you make a PR for this?

[cmelian]

I don't have much time right now. I'll make a PR next week or, if you want, you may do it.

[nobitagit]

Is it necessary to attach -webkit-animation: androidBugfix infinite 1s; to the body tag? Will it work attached the menu itself or any other tag that the directive creates?

Ideally the directive should not affect parts of the DOM that it does not create/own.
In the meantime i'll add a note to the readme for this. Thanks again.