Button freezing on MD

[EriveltonMS]

This is a (multiple allowed):

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Framework7 Version: Framework7 2.2.5

• Platform and Target: CORDOVA ANDROID.

What you did

Create left panel on app. Programming was not used, only the standard framework css. I used the panel of the template itself to create my model.

`

Menu

• Questionário
• Relatórios PDT
• Solicitações ERGO
• Minha Conta

</div>`

Expected Behavior

Ripple animated buttons using the MD standard

Actual Behavior

Button ripple animation on panel is "freezing", not returning to the default state. Home buttom too.

[ghost]

I have the same problem on my App.

:(

[EriveltonMS]

@l41lt0n , temporarily disable the ripple by changing the parameter in the app configuration

touch:{ materialRipple:false, }

with this the problem disappears, but the effect too.

[nolimits4web]

Do you see any errors in browser console?

[ghost]

@nolimits4web

For me it dont show nothing on the console. only the events Javascript not works. It still freezed. so I need to close the app and reopen and it works again.

[EriveltonMS]

@nolimits4web , same from @l41lt0n, only freeze, no errors.

[ghost]

@EriveltonMS,

I am doing test "materialRipple:false", for now everything is working.

for you it solve the problem? the events is fired now?

Let's see the result :)

[ghost]

@nolimits4web

I think that problem is not on the framework7.

It start to happen when app go to background and stay there for a time. I have the same issue on the iOS/Android

I have used materialRipple:false but the result is the same (only without animation/effect on the button), no javascript function is fired.

[doradsoft]

I am experiencing the same problem too. Thanks to god i have managed to somehow reproduce it. JSFiddle. Instructions:

1. Use chrome
2. Open console
3. Tap like a crazy (swiping a little bit helps) inside the left link in the bottom.
   • You may need to fit the iteration numbers in the loop inside "logics" function to your cpu skills. In my case 100 wasn't enough to reproduce the bug, whilst 10000 was too much.

[EriveltonMS]

I detected that my application had two initializations of the framework7, one of them without any option (remnant of the phonegap template). After removing one of them, the effect returned to work.

[doradsoft]

@nolimits4web sent you a mail with a real reproduce.

[fdamore-xnoova]

same issue, tap like a crazy with chrome/desktop or chrome/mobile in every button with md effect, the effect freeze and add a trasparent white layer every time i tap on button

[fdamore-xnoova]

@EriveltonMS i used your code

touch:{ materialRipple:false, }

and the bug is fixed. the effect remain

[fdamore-xnoova]

@EriveltonMS sorry, i didnt fix by using your code. Instead i forgot a comma and i generate a syntax error. But with the syntax error the md effect works correctly! :-\

var app = new Framework7({ ... view: { pushState: true, } //<-- comma missed touch:{ materialRipple:false, } });

[fdamore-xnoova]

touch:{ materialRipple:false, } doesnt work for me, but im using class "no-ripple" in every link/button

[fatihtkale]

is this fixed yet?

[doradsoft]

Isn't fixed yet. 3.1.1 reproduce.

[geoorg30]

I have same issue, and after inspection using chrome dev tools, i found the issue is caused by the panel-reveal overlay. This blocks the UI with a transparent div.

[fatihtkale]

I found out it was because i had 2 linked Framework7 in my app.js file

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[doradsoft]

I think it worth fixing

[oleksandr-sovenko]

I have the same problem cordova + framework7, I noticed it happens when framework7 is working under cordova, but without cordova looks good. I can't understand why so :|. I will use touch:{ materialRipple:false }

[mmis1000]

I actully can reproduce this issue reliably on desktop by rapidly abuse click on tabbar buttons, unsure if it has the same cause though.

using desktop firefox, enable adaptability design mode in 12 menu, enale touch support, find a tabbar in
https://framework7.io/kitchen-sink/core/?theme=md
spam clicks very fast on it,
it should freeze like this

Maybe it is a good start to find out what was gone wrong here.

Edited:

Also about to reproduce the exact same proble

[doradsoft]

@mmis1000 repoduced in chrome (@oleksandr-sovenko: without cordova):

[doradsoft]

Still happening in 3.6.5

[fatihtkale]

Guys check if you have framework7 implemtet twice in you app.js thats what fixed it for me.

[oleksandr-sovenko]

aah damn yes. might be. I noticed "twice initialization app.js" in my app too. And removed. ... But now need to try remove now touch:{ materialRipple:false }. Thx.

I had twice initialized app.js, because I use webpack. But webpack add app.js automatically, plus I have app.js in my index.html template. That why I had twice initialized app.js.