akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.29k stars 7.96k forks source link

Sidebar scrolling not working properly on iOS Safari #2058

Open pnorbi1 opened 5 years ago

pnorbi1 commented 5 years ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior: Dear Ngx-Admin Team, we really like your work, and thank You for your contribution and we would like to introduce it in one of our project. The sidebar menu scrolling is not working properly on iOS Safari. Unfortunately we cannot ignore users with Safari :(

Expected behavior: It would be good to experience the same behavior as on Chrome, Firefox, etc. So when I scroll on sidebar menu it will only scroll on that one, not on the background underneath the sidebar.

Steps to reproduce: Context: ngx-admin demo content, nothing source code modification. Basically this can be experienced when we open Your demo page as well: When I open the sidebar with the hamburger menu, the sidebar opens it properly, but the touch scroll is "active" on the background underneath thus scrolling the body. When i expand a menu in the sidebar I can finally scroll within the sidebar menus, but when I scroll down to the bottom of the sidebar the Safari elastic feature comes in picture, and again afterwards scrolling on the sidebar is "active" on the background underneath so once again i cannot scroll within the sidebar menus

Related code: On iOS Safari https://akveo.com/ngx-admin/

Other information:

IOS 12.1.4. Safari

Angular, Nebular

As in the demo:
"@angular/core": "^7.0.3",
"@nebular/theme": "3.1.0",

Thank you very much in advance for your assistance.

pnorbi1 commented 5 years ago

Dear Ngx-Admin Team or @yggg, Can you provide any update on this issue? As we have tight project-deadlines as well, it is important to know whether we can use Ngx-Admin in our project or we should search for another solution due to this significant wrong behavior on Safari.

Thank You in advance!

cpw999cn commented 5 years ago

Open the dashboard page on iOS safari, quickly scroll down to the bottom, and when scrolling close to the footer, it bounces back. You need to scroll down again to see the contents of the footer. At this point, scroll up quickly, and you'll find that you've bounced back before you scroll to the top of the page. This problem can be serious if your page content is just a little more than a screen.

vinayak12 commented 4 years ago

Dear Ngx-Admin Team or @yggg, Can you provide any update on this issue? As we have tight project-deadlines as well, it is important to know whether we can use Ngx-Admin in our project or we should search for another solution due to this significant wrong behavior on Safari.

Thank You in advance! @pnorbi1 did you fix it?

pnorbi1 commented 4 years ago

So is this problem still valid? I'm sorry to hear that! @vinayak12 unfortunately no, we had to look for other solutions as we didn't receive any fix/solution and we had to move forward. Hope Ngx-Admin Team will have some answers after a year for further users who aim to use this package.

prasadbugad commented 3 years ago

@vinayak12 , @pnorbi1 - I have faced same issue on Mac/iPad's with ngx-admin Angular Template and solved this by using some CSS tweaks.

Problem: I noticed that the scroll bar is started after header and that is only for main content, that's why when we scrolling close to the footer, it bounces back, so this need to be start from the very top of the browser even if header is fixed. The actual problem is with the scroll, the scroll does not gets applied on whole page it is instead just on the layout component. So once you correct this it gets fixed.

Solution: This solution worked for me. Added below CSS in main _layout.scss page

body {
   overflow: scroll !important;
} 

nb-layout.with-scroll .scrollable-container {
  height: auto !important;
}

Thank you.

Janl1 commented 2 years ago

Is there still no official solution to this problem? If I open the demo of nebular at https://www.akveo.com/ngx-admin/pages/dashboard?theme=material-light on an iOS device I have a very poor user experience.

Scrolling in the menu results in scrolling the page in the background which makes navigation on bigger menus nearly impossible.

https://user-images.githubusercontent.com/12115859/201668120-8fb858ac-564d-4592-a330-4121db242195.MOV