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

Mobile sidebar obstructed by main page code blocks #8646

Closed
3 tasks done
Josh-Cena opened this issue Apr 15, 2023 · 4 comments · Fixed by #8856
Closed
3 tasks done

Mobile sidebar obstructed by main page code blocks #8646

Josh-Cena opened this issue Apr 15, 2023 · 4 comments · Fixed by #8856
Assignees
@LeoMcA
Labels
🐛 bug Something isn't working, or isn't working as expected layout Issues related to alignment, positioning and spacing/margin/padding p1 We will address this soon and will provide capacity from our team for it in the next few releases. sidebar/toc Sidebar and table of contents

Comments

@Josh-Cena
Copy link
Member

Josh-Cena commented Apr 15, 2023 •
edited
Loading

Summary

There seems to be a z-index issue with code blocks and the mobile sidebar overlay. This issue has persisted for a few weeks but I'm surprised no one seems to have reported it yet.

URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator

(And every other page)

Reproduction steps

  1. Scroll so that there's a code block in view.
  2. Open the sidebar.

Expected behavior

The sidebar to completely cover the main content.

Actual behavior

The sidebar is obstructed by the code block and other SVG icons.

Device

Smartphone

Browser

Safari

Browser version

Stable

Operating system

iOS

Screenshot

image

Anything else?

I can reproduce this on all browsers (Safari, FF, Chrome) on mobile.

Validations
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Apr 15, 2023
@Josh-Cena Josh-Cena mentioned this issue Apr 16, 2023
Closed
@dostonnabotov
Copy link

Hey, there! 👋
If it hasn't been assigned yet, I would be happy to pick it up and fix this issue.

@yarusome
Copy link
Contributor

The display: flex on .main-wrapper seems culpable.

@caugner caugner added 🐛 bug Something isn't working, or isn't working as expected p1 We will address this soon and will provide capacity from our team for it in the next few releases. sidebar/toc Sidebar and table of contents layout Issues related to alignment, positioning and spacing/margin/padding and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Apr 18, 2023
@Josh-Cena Josh-Cena mentioned this issue Apr 21, 2023
Closed
@yarusome yarusome mentioned this issue Apr 25, 2023
Closed
3 tasks
@ruihildt
Copy link

I guess this is the same issue:
Screenshot_20230511-204353

@Cooldogyum
Copy link

There also appears to be a gap at the top of the sidebar when advertisements load.

developer mozilla org_en-US_docs_Web_JavaScript_Guide_Indexed_collections

LeoMcA added a commit that referenced this issue May 15, 2023
@LeoMcA
fix(sidebar): incorrect offset and z-index on mobile
4b10be8 
fixes #8646
fixes #8702
LeoMcA added a commit that referenced this issue May 15, 2023
@LeoMcA
fix(sidebar): incorrect offset and z-index on mobile
c448c85 
fixes #8646
fixes #8702
@LeoMcA LeoMcA mentioned this issue May 15, 2023
Merged
LeoMcA added a commit that referenced this issue May 15, 2023
@LeoMcA
fix(sidebar): incorrect offset and z-index on mobile
adcd2c9 
remove --z-index-top variable, and split into per-element variables -
not everything can be on top!

remove some unnecessary z-indexes due to relative positioning

I intend to follow up with another commit removing the rest of the
reused/unnecessary z-indexes later - but don't want to block fixing this
issue with that

fixes #8646
fixes #8702
LeoMcA added a commit that referenced this issue May 15, 2023
@LeoMcA
fix(sidebar): incorrect offset and z-index on mobile (#8856)
af1cfdc 
remove --z-index-top variable, and split into per-element variables -
not everything can be on top!

remove some unnecessary z-indexes due to relative positioning

I intend to follow up with another commit removing the rest of the
reused/unnecessary z-indexes later - but don't want to block fixing this
issue with that

fixes #8646
fixes #8702
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@LeoMcA LeoMcA

Labels
🐛 bug Something isn't working, or isn't working as expected layout Issues related to alignment, positioning and spacing/margin/padding p1 We will address this soon and will provide capacity from our team for it in the next few releases. sidebar/toc Sidebar and table of contents
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(sidebar): incorrect offset and z-index on mobile mdn/yari
7 participants
@caugner @LeoMcA @ruihildt @Cooldogyum @Josh-Cena @dostonnabotov @yarusome