Menu icon Foundation
Off Canvas Disappears (Chrome)

I have a page consisting of an Off Canvas with a (Mapbox) map inside it. In Chrome, any interaction with the map makes the Off Canvas bar disappear, seemingly putting the map in front of the Off Canvas bar.

Has anyone else experienced anything like this with Off Canvas?

Strangely, if I toggle the tab-bar height attribute off and on again in the inspector (so not actually changing any CSS), the bar returns. Feels like a bug in Chrome?

off canvaschrome

I have a page consisting of an Off Canvas with a (Mapbox) map inside it. In Chrome, any interaction with the map makes the Off Canvas bar disappear, seemingly putting the map in front of the Off Canvas bar.

Has anyone else experienced anything like this with Off Canvas?

Strangely, if I toggle the tab-bar height attribute off and on again in the inspector (so not actually changing any CSS), the bar returns. Feels like a bug in Chrome?

Sam Smith over 5 years ago

I've uploaded an example, if anyone would like to take a look http://jaunt.org.uk/brighton/

Sam Smith over 5 years ago

Is there any javascript that hides the off canvas bar? Something that might conflict with the map?

Sam Smith about 5 years ago

...or does anyone know a way around this?

Tomi Tomion about 5 years ago

I guess it's not JS but transform-3d properties conflict. Try to change the height of your map from 100% to 95%, somehow it helped.

/* Map */
/* line 253, jaunt.scss */
#map {
  height: 95%;
}

Sam Smith about 5 years ago

Thanks for the reply Tomi, that does seem to work. Obviously still not ideal, because I'd like it to be 100% high. I tried 99% to see if that'd work, but then the bar partially moves off the screen. This does at least demonstrate what is happening - the bar is being moved up, off the screen (for whatever reason).

(This also happens, to a lesser extent in Safari)

Tomi Tomion about 5 years ago

I still haven't a clue of what's going on there. However I think you don't need the map to be 100% since there is the sticky top-bar. But yes, 95% is a pretty rough way.

Try next bit of code, it just compensates the height of the top-bar (2.8125rem in your css) more precisely. Gonna work better on different resolutions.

#map {
  height: calc(100% - 2.8125rem);
}

Sam Smith about 5 years ago

Ah yes, you are right. Sidetracked by the weirdness, I didn't get the basics right. While this doesn't explain what's happening, it does solve my problem, thanks :)