Slidebars broke iOS & Chrome address bar auto-resize

[robypez]

Hello everybody, I'm getting crazy because iOS and Chrome address bar doesn't auto resize while scrolling my website and now I discover that the fault is in Slidebars.

You can try also on the demo website: if you scroll on iOS the address bar is always visibile on top, try with another website and it disappear.

You can easy see the difference if you remove these rules

html, body {
    overflow: hidden;
}

canvas=container] {
    overflow-y: auto;
}

from the css. You remove the rules and the browser behavior is ok. By the way without that rules Slidebars are not ok. Any idea how to have a working Slidebars with the right browser behaviour?

[procmail]

Hi, any update on this issue please? Throughout the entire Sidebars site (https://www.adchsm.com/slidebars/), where the top menu is using Sidebars, the iOS Safari address bar never disappears when scrolling down.

[mnakalay]

I confirm and it makes sense since, with those rules, the body never scrolls so the bar will not disappear.

Still, it is a problem

[mnakalay]

you could try to add this script to your page as a temporary fix https://github.com/scottjehl/Hide-Address-Bar

[JoryHogeveen]

This also prevents the "refresh" action when swiping down in Chrome

[JoryHogeveen]

@adchsm Maybe an idea to set the canvas container on the body tag and make the script work with that instead of an inner element?

[JoryHogeveen]

Or another solution:

Change (https://github.com/adchsm/Slidebars/blob/master/dist/slidebars.css#L23):

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

To:

html {
    overflow-y: auto;
}
html, body {
    width: 100%;
    overflow-x: hidden;
}

And change (https://github.com/adchsm/Slidebars/blob/master/dist/slidebars.css#L37):

[canvas=container] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    background-color: white; /* Basic background color, overwrite this in your own css. */
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
}

To:

[canvas=container] {
    width: 100%;
    position: relative;
    background-color: white; /* Basic background color, overwrite this in your own css. */
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
}

Seems to work great here, will test some more.

[jornhenkes]

@JoryHogeveen Thanks, that a great fix. I had an issue with Slidebars in combination with Wordpress where the last 32px at the bottom of the website where pushed out of the viewport when the WordPress admin bar is visible. Your css fixed this as well.

[JoryHogeveen]

@jornhenkes No problem! If you're interested, I've turned slidebars into a WP plugin. It's still a 0.x version but I've used it on several occasions for production sites aswell. https://wordpress.org/plugins/off-canvas-sidebars/

The next release will have this patch included. See dev links below:

Current dev repository: https://github.com/JoryHogeveen/off-canvas-sidebars/tree/dev Dev changes (PR): https://github.com/JoryHogeveen/off-canvas-sidebars/pull/25

[zeroconso]

@JoryHogeveen thanks for your solution. It works very well but broke my css because of the canvas-container not 100% height. I solved my problem doing this:

[data-canvas=container] { width: 100%; min-height: -webkit-calc(100vh - 60px); min-height: -moz-calc(100vh - 60px); min-height: calc(100vh - 60px); position: relative; background-color: white; -webkit-overflow-scrolling: touch; } I don't now too much about css, but it works... Hope this helps for anyone getting same css problem :)

[JoryHogeveen]

Hi @zeroconso Thanks for sharing. I do wonder what the -60px in calc(100vh - 60px) is for though.