Materialize: "sidenav-overlay" div sometimes remains on screen when side-nav is closed

[jrioromero]

Hello,

This is something that did not happen with the previous version 0.97.7, but it does with the newest 0.97.8.
In mobile/touchable devices, when trying to hide/close the side-nav sliding the finger (not clicking), the action does not hide the "sidenav-overlay" div sometimes.

This is something you can check by yourselves in your home page (www.materializecss.com), and it only happens "sometimes" because it seems that sliding the finger widely it works (also clicking on the dark "sidenav-overlay" div), but sliding the finger not so widely then it does not work.

I see in your changelog that some "minor side nav fixes" were done. So, it makes sense that you could have broken something in the process, right?

I repeat that it did not happen with the previous version.

[avezenkov]

Hello,
I am also able to reproduce the same problem. The main page stays partially overlaid if you slide fast to close the side navigation.
Thanks,
Alex

[travisbotello]

Same here. Even the official demo on materializecss.com/ has this issue.

[basiljose1]

(function($){
$(function(){
$('.button-collapse').sideNav({
closeOnClick: true
});
});
})(jQuery);

pass closeOnClick: true on SideNav initialization ..it will work

[jrioromero]

@basiljose1 I tried your solution, but no. It does not solve the problem at all.

[jusemon]

3951 I think that this is the same issue.

(Sorry for my bad english...)

[jrioromero]

@acburst The issue is still there with the new version 0.98.0 and you can reproduce it here: http://materializecss.com/

In fact, it appeared in the version 0.97.8 (it was working correctly in 0.97.7).

Regards

[olivertylsar]

Same problem here. I wrote this issue here first yesterday. https://gitter.im/Dogfalo/materialize Then found out there's the same issue already being discussed. Would be nice to have it fixed. Do you know how often these little updates come out, so when could it be possibly fixed?

[jrioromero]

Ok guys, it worked for me, but partially.

@JSMontoya @olivertylsar
Even when the sidenav-overlay is correctly removed with this fix, there is still something there when you click again on the menu icon. The side-nav tries to open.

So, additionally I added the call for the function removeMenu() after the line:
else if (!menuOut || velocityX > 0.3)

It worked completely for me.

I hope it helps!

[olivertylsar]

@jrioromero Doesn't work for me. The sidenav-overlay is still there when i swipe the menu to the left. I still have to click somewhere to let it disappear.

[jrioromero]

@olivertylsar But did you include the fix from @JSMontoya? With this, the sidenav-overlay should dissapear. Then, including the call to the function removeMenu(), the additional click on the menu icon should not be necessary.

[typad1]

The code from @JSMontoya works perfectly! I just replaced

var $overlay = $('<div id="sidenav-overlay"></div>');

with

var $overlay = $('#sidenav-overlay'); if ($overlay.length === 0) { $overlay = $('<div id="sidenav-overlay"></div>'); }

in materialize.js and it works PERFECTLY! Did he make a pull request or should I?

[olivertylsar]

@jrioromero OMG I just figured out that I switched script source to materialize.min.js in base template and didn't switch it back, forgot it and I kept on editing materialize.js which wasn't attached. 🤣 Now I got back to this issue after a few days, checked everything again and I couldn't believe it. 🤣 I'm sorry, it works like a charm, thank you guys! 😉

[Dogfalo]

This was due to a queuing problem with the animations I believe. We've fixed in our v1-dev branch