Describe the problem that you experienced
Problem
On Safari (desktop - tested on OS 26) - The original shell sets overflow: hidden on body to lock scroll when the mobile nav opens. This removes the scrollbar, causing an 8 px layout shift as the scrollbar gutter disappears. This instantly changes the viewport width, which:
- Triggers CSS media query breakpoint changes mid-animation
- Causes content to reflow and jump
- Is especially severe on Safari, where body is the scroll root by default
Here are 2 images to show the bug:
Note the top image gives one width, when enabling the menu and hiding the scrollbar, the second shows the new width which triggers the 700px media query with a new reported width.
Enter the URL of the topic with the problem
https://angular.dev
Describe what you were looking for in the documentation
No response
Describe the actions that led you to experience the problem
I was testing another bug when setting to 700px exactly would expose a previous media query collision.
Describe what you want to experience that would fix the problem
Move the scroll root from body to html by setting overflow-y: scroll on the html element. The persistent overflow-y: scroll keeps the scrollbar gutter reserved at all times — even when scroll is locked — so the viewport width never changes and media queries never fire at the wrong breakpoint. (Additionally you'd need some cleanup as some other elements will break and need fixing. Like you may need to scroll spy and return scroll, you also may need to ditch scroll: smooth when you capture and restore scroll positions (because when you enable overflow: hidden your content will jump to top 0)
Add a screenshot if that helps illustrate the problem
No response
If this problem caused an exception or error, please paste it here
If the problem is browser-specific, please specify the device, OS, browser, and version
Safari with mouse (desktop) so that you get visible scrollbars.
Provide any additional information here in as much as detail as you can
I was playing around with the site and I've fixed alot of the bugs at
https://dev.zadesigns.com (at the time of this report) but I also switched to ui-router and made a few other tweaks (fixed animation and other things) so it may not be a 100% help.. but at least you can see what i envisioned as a fix.
Describe the problem that you experienced
Problem
On Safari (desktop - tested on OS 26) - The original shell sets overflow: hidden on body to lock scroll when the mobile nav opens. This removes the scrollbar, causing an 8 px layout shift as the scrollbar gutter disappears. This instantly changes the viewport width, which:
Here are 2 images to show the bug:
Note the top image gives one width, when enabling the menu and hiding the scrollbar, the second shows the new width which triggers the 700px media query with a new reported width.
Enter the URL of the topic with the problem
https://angular.dev
Describe what you were looking for in the documentation
No response
Describe the actions that led you to experience the problem
I was testing another bug when setting to 700px exactly would expose a previous media query collision.
Describe what you want to experience that would fix the problem
Move the scroll root from body to html by setting overflow-y: scroll on the html element. The persistent overflow-y: scroll keeps the scrollbar gutter reserved at all times — even when scroll is locked — so the viewport width never changes and media queries never fire at the wrong breakpoint. (Additionally you'd need some cleanup as some other elements will break and need fixing. Like you may need to scroll spy and return scroll, you also may need to ditch scroll: smooth when you capture and restore scroll positions (because when you enable overflow: hidden your content will jump to top 0)
Add a screenshot if that helps illustrate the problem
No response
If this problem caused an exception or error, please paste it here
If the problem is browser-specific, please specify the device, OS, browser, and version
Provide any additional information here in as much as detail as you can