search

DevExpress / devextreme-angular-template

Responsive Application Layout Templates​ based on DevExtreme Angular Components
https://js.devexpress.com/
MIT License
119 stars 48 forks source link

Useless scrollbar on ipad #60

Open hakimio opened 5 years ago

hakimio commented 5 years ago

To reproduce:

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 commented 5 years ago

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 commented 5 years ago

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

ovchinnikov commented 5 years ago

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

hakimio commented 5 years ago

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 ?

ovchinnikov commented 5 years ago

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

hakimio commented 5 years ago

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