devextreme-angular-template icon indicating copy to clipboard operation
devextreme-angular-template copied to clipboard

Published 20 hours ago • verified publisher icon DevExpress

Useless scrollbar on ipad

Open hakimio opened this issue 5 years ago • 6 comments

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.

hakimio avatar Oct 12 '18 12:10 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.

ovchinnikov avatar Oct 23 '18 09:10 ovchinnikov

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

hakimio avatar Oct 23 '18 09:10 hakimio

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

ovchinnikov avatar Oct 23 '18 11:10 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.

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 https://github.com/DevExpress/DevExtreme/pull/5979 ?

hakimio avatar Oct 31 '18 11:10 hakimio

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

ovchinnikov avatar Oct 31 '18 12:10 ovchinnikov

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

hakimio avatar Nov 01 '18 10:11 hakimio