[SOLVED] Icons overlay on IOS

I use framework7 v4.4.0. When I navigate from any page back to the main page there is an overlay of icons. This is only IOS (on real device and on simulator) behavior.

This problem does not always occur when navigating back. It appears if I use the mainView.router.navigate({name: ‘pageName’},{ignoreCache: true, reloadCurrent: true}) method to reload the page from which I return to the main page of the application.

How to fix it?

There is some bug happening. Could you setup a minimal JSFiddle with the issue?

This is the start page: https://jsfiddle.net/ysza6w48/
This is settings page: https://jsfiddle.net/6j5zok72/

When I call mainView.router.navigate({name:‘settings’},{ignoreCache: true, reloadCurrent: true}) on the settings page and go back to the start page there is a problem of icon overlay

But this fiddles don’t replicate the issue. Can you just put these pages into same fiddle and some buttons to navigate between them so we can see the issue. You can start from forking this fiddle https://jsfiddle.net/nolimits4web/o2ejupu1/


Slide out the left panel > Click “Settings” > Click on the orange label to change the theme > Click “Back”

In this example it was not succeeded to show icons overlay with mainView.router.navigate({name:‘settings’},{ignoreCache: true, reloadCurrent: true}) method. But I did it another way: I changed the class attribute with Dom7

Please, please, please :slight_smile: Remove all unnecessary code from that fiddle, it takes me forever to load. Any reason it has ~ 2000 lines of code in CSS block? For what i quickly see:

$('#menu-icon').attr('class','icon header-remmy-circle-orange');
$('#settings-navbar').attr('class','navbar-inner orange-theme');

You should change classes in this way, you override all classes that can cause the issue. Use .addClass() and .removeClass() methods to modify classes

Thank you!:slightly_smiling_face: .addClass() and .removeClass() worked for me.