Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hamburger button on FMS mobile web has no visible effect after entering location / postcode #3617

Closed
ludovic-tc opened this issue Oct 15, 2021 · 1 comment · Fixed by #3686
Closed

Hamburger button on FMS mobile web has no visible effect after entering location / postcode #3617

ludovic-tc opened this issue Oct 15, 2021 · 1 comment · Fixed by #3686
Labels
Design mobile

Comments

@ludovic-tc
Copy link
Contributor

ludovic-tc commented Oct 15, 2021 •
edited

Describe the bug
After choosing a location, the hamburger button on fixmystreet.com does not display any visible UI elements when it is clicked, other than turning into an 'X' button.

NB: also affects at least one cobrand (CEC).

Screenshots

To Reproduce
Steps to reproduce the behavior:

  1. Go to the homepage of fixmystreet.com on a mobile device or using browser tools' responsive view.
  2. Click on the 'hamburger' button ( ≡ ). You should see the menu options specified under 'Expected Behaviour' below. Click X to close the menu.
  3. Search for any postcode (e.g. the example postcode).
  4. Click on the 'hamburger' button ( ≡ ) again.
  5. Now, other than the button turning into an X, nothing else appears on screen. Clicking the X still turns the button back into ≡.

Expected behavior
A menu including (presumably) the following options should appear:

  • Report a problem
  • Sign in
  • All reports
  • Local alerts
  • Help
  • Privacy

Desktop

  • manifests in browser mobile view tools

Smartphone (please complete the following information):
Believed to affect all mobile browsers. Tested on:

  • Device: [e.g. iPhone7
  • OS: iOS 14.6 & 14.7
  • Browser: Safari
@dracos
Copy link
Member

dracos commented Oct 15, 2021

The menu is appearing/disappearing okay, looks like just need to make sure the z-index is higher than the map's. Not sure if something has changed in this area since the menu was last changed to behave like this.

zarino added a commit that referenced this issue Nov 29, 2021
@zarino
Explicit z-indexes to stack mobile menu above map
7720369 
I am totally at a loss as to when this bug was introduced, or what
caused it. The stacking clearly worked fine when the new JavaScript-
powered pop-over menu was added 12 months ago (in a01e927), so
something must have changed, in core, since then.

I think the absolute positions of everything on the map page have
always been relative to the viewport (rather than there being any
`position: relative` parents). If so, it can’t be that a positioned
parent has been removed, causing the `z-indexes` to no longer be in
the right stacking context.

The `z-index: 1` for `.map-fullscreen #map_box` was set 5 years ago
(https://github.com/mysociety/fixmystreet/blame/master/web/cobrands/sass/_base.scss#L2171)
in a5ef113, with a comment: `// stack above positioned elements later
on the page (eg: .report-list-filters)`.

The `z-index: 1` for `#main-nav` was set 12 months ago
(https://github.com/mysociety/fixmystreet/blame/master/web/cobrands/sass/_base.scss#L784)
in 1784886 (part of the same pop-over menu pull request #3270) and it
even has an inline comment saying `// So appears over map`!

Anyway, unless someone else can find what changed in the meantime,
I’ve done the most obvious thing necessary, which is to define higher
z-indexes for the `#js-menu-open-modal` and `#main-nav`.

Fixes #3617
@zarino zarino mentioned this issue Nov 29, 2021
Merged
@zarino zarino closed this as completed in 9011904 Nov 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Design mobile
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Explicit z-indexes to stack mobile menu above map mysociety/fixmystreet
3 participants
@dracos @ludovic-tc @lizettal