Android App freeze while opening panel and scrolling list at the same time
See original GitHub issueI use the template from https://github.com/phonegap/phonegap-template-vue-f7-split-panel and updated both framework7 & framework7-vue to 3.6.5 To reproduce the bug, I just add a f7-list in Home.vue from the template with dummy data so it can be scrolled. Here’s the complete code: https://github.com/freddysu/f7-panel-bug-demo
- Framework7 version: framework7: 3.6.5, framework7-vue: 3.6.5
- Platform and Target: Android Cordova app (Not on iOS)
- Live Link or JSFiddle:
Describe the bug
On physical Android device, when scrolling the list and click on menu icon to open the panel at the same time, the app will freeze.
To Reproduce
Steps to reproduce the behavior:
- Scroll the page before it stop and click on menu icon at the same time
- The whole app freeze (all you can do now is kill the app)
Expected behavior
Open the panel before/after the scrolling finished without freezing the App.
Actual Behavior
The whole page freeze no matter what you click.
Screenshots
Additional context
I’ve tried not use framework7-vue <left-panel-view />
and use plain framework 7 <div class="panel panel-left panel-reveal">
instead. But the bug still exists.
You can only see the bug on physical Android device cuz you need to scroll and then click the menu icon at the same time.
Issue Analytics
- State:
- Created 5 years ago
- Comments:8
Top GitHub Comments
I seem to be having the same issue, I tried keeping track of the scroll and remove class panel-open from the “a” element and add it back in after a timeout of 250. But unfortunately the issue still prevails. Are there any updates?
Update:
I 've manage to get it to work by clearing the timeout in between.
Essentially I 've added an onScroll attribute on each page-content div, that calls a function “scrollHandler()” that removes the “panel-open” class from the navigation bar, and also sets a timeout that will put it back in after 250ms. Very important to clear the timeout everytime the user scrolls.
function scrollStop(){ var navigation = document.getElementById(‘navigation’); navigation.classList.add(“panel-open”); }
function scrollHandler() { var navigation = document.getElementById(‘navigation’); navigation.classList.remove(“panel-open”); if(typeof t !== “undefined”){ clearTimeout(t); } t = setTimeout(scrollStop, 250); }
This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.