Description
Reproduction
Steps to reproduce:
- open with IPhone IOS 13.4 safari
- open with Android Phone
compare two design look.
Expected Behavior
two design should be same
Actual Behavior
the IOS Safari design is incorrect.
Some of my efforts:
I think this is due to -webkit-overflow-scrolling + position fixed, in some scene will face unexpected behavior.
refer:
https://juejin.im/post/5b6bb6a1f265da0f7b2f9228 (chinese)
https://weblog.west-wind.com/posts/2015/jun/05/ipad-scroll-issues-with-fixed-content (position:fixed and –webkit-overflow-scrolling <-- this part)
my opinion:
MDN said this is non standard and deprecated attribute.
so i think material should not use it by default.
and this solution is for fix div scroll on mobile, but currently for develop mobile app the best practice is use body scroll. because body scroll by default is momentum scroll and it is the only way to remove address bar on mobile.
please give direction for me, what should i do ?
Environment
Angular CLI: 9.1.6
Node: 12.16.1
OS: win32 x64
Angular: 9.1.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
@angular-devkit/architect 0.901.6
@angular-devkit/build-angular 0.901.6
@angular-devkit/build-optimizer 0.901.6
@angular-devkit/build-webpack 0.901.6
@angular-devkit/core 9.1.6
@angular-devkit/schematics 9.1.6
@angular/cdk 9.2.3
@angular/cli 9.1.6
@angular/material 9.2.3
@ngtools/webpack 9.1.6
@schematics/angular 9.1.6
@schematics/update 0.901.6
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0