Useless scrollbar on ipad

[hakimio]

To reproduce:

• Choose device emulation from Chrome developer tools
• Select ipad

You'll see that there is useless scrollbar in "home" page.

EDIT: it seems to be caused by the navigation menu in "outer toolbar" layout.

[ovchinnikov]

The min-height property of dxScrollable content is set to 101%. That is why you see a scrollbar in the iOS simulator. It's necessary to prevent whole page bounce behavior on iPad and iPhone.

[hakimio]

@ovchinnikov Why doesn't it happen when "inner toolbar" layout is used then?

[ovchinnikov]

I have the same behavior on my side with the "inner toolbar" layout

[hakimio]

The min-height property of dxScrollable content is set to 101%. That is why you see a scrollbar in the iOS simulator. It's necessary to prevent whole page bounce behavior on iPad and iPhone.

A simpler way to prevent the whole page bounce would be to set overflow: hidden on the html element:

html {
    overflow: hidden;
}

EDIT: is this already fixed in DevExpress/DevExtreme#5979 ?

[ovchinnikov]

Your solution doesn't work for me. Please check this example on a real iOS device: https://qly5o168pq.codesandbox.io/

[hakimio]

@ovchinnikov You are right. Unfortunately overflow: hidden solution disables page bounce on Mac OS Safari but not on iOS Safari.