Resolve iOS issue w/ new two-tiered header - #3383
Conversation
lilybarrett
added
dev-blue
9c173f2 to
60ff53f
Compare
| @@ -1,4 +1,4 @@ | |||
| // Navigation bar on both desktop and mobile | |||
| // Navigation bar on both dropdown and fullscreen | |||
There was a problem hiding this comment.
Renamed some stuff -- dropdown in place of desktop and fullscreen in place of mobile -- to reflect the fact that we have some styling (specifically on the Languages menu) that doesn't adhere to previous assumptions of what desktop/mobile menus look like.
| header.dataset.navOpen = "true"; | ||
| }); | ||
|
|
||
| rootElement.querySelectorAll(TOGGLE_SELECTORS.dropdown).forEach(el => { |
There was a problem hiding this comment.
Since we have multiple menus to account for now, I added this in to help close menus if another opens.
| disableBodyScroll(header); | ||
| }); | ||
|
|
||
| rootElement.querySelectorAll(TOGGLE_SELECTORS.dropdown).forEach(el => { |
There was a problem hiding this comment.
Since we have multiple menus to account for now, I added this in to help close menus if another opens.
| ) | ||
| .forEach(toggleAriaExpanded); | ||
|
|
||
| rootElement |
There was a problem hiding this comment.
Since we have multiple menus to account for now, I added this in to help close menus if another opens.
| closestHeader && | ||
| closestHeader.querySelector("[data-nav='fullscreen-menu-content']") // for fullscreen bottom-tier menu used on mobile | ||
| ) { | ||
| disableBodyScroll(closestHeader, { reserveScrollBarGap: true }); |
There was a problem hiding this comment.
This is the real fix for the bug -- We were imposing desktop-like behavior on the header while on mobile.
lilybarrett
changed the title
thecristen
left a comment
thecristen
left a comment
There was a problem hiding this comment.
Which iOS device/version were you testing with? I seem to still see the missing language menu on my phone (iPhone 16e on iOS 26.6). (However, it is not freezing the page this time!)
@thecristen Some follow-up questions!
|
2 participants
This solves an iOS bug as part of https://app.asana.com/1/15492006741476/project/1213994587940653/task/1216860386844707?focus=true
Scope
The bug was tricky to troubleshoot since it did not appear when emulating iOS devices using browser dev tools -- only when using an actual iOS device. Android was unaffected.
Asana Ticket:
https://app.asana.com/1/15492006741476/project/1213994587940653/task/1216860386844707?focus=true
Implementation
Screenshots
How to test
To repro the bug:
To test the fix: