> Note the related T206354
We have a z-index problem.
===Description
When opening the main navigation menu, the dark overlay screen causes the fade next to the Learn more link to become visible as a white element on the screen. I'm seeing this on:
- Android / Chrome, Firefox
- iOS / Safari, Chrome, Firefox
- MacOS / Safari, Chrome, Firefox
This only occurs during the animation and happens quite quickly (blink and you miss it!)
===Documentation
{F28010707}
| video at 0:04s
|{F28010728}
===Development notes
This is a z-index issue.
.transparent-shield, .navigation-drawer has a z-index of 0 whereas .ambox-learn-more has a z-index of 1 (intentionally so that the gradient appears above any text). The learn more link however should appears below the shield.
Luckily z-index's are managed in a single file: mobile.less/mobile.variables.less with a few naughty CSS rules not using variables :
* resources/mobile.notifications.overlay/NotificationsOverlay.less
* MinervaNeue/resources/skins.minerva.content.styles/templates/ambox.less
* MinervaNeue/skinStyles/ext.echo.styles.special/SpecialNotificationsOverlay.less
```
@z-indexBase: 0;
@z-indexOverlay: 1;
@z-indexOverOverlay: 2;
```
To fix this we will need to rethink z-indexes and ensure learn more is the same or lower than the transparent shield.
Increasing the z-index of transparent-shield will require increasing the z-index of other things e.g. @z-indexOverOverlay and z-indexBase so be careful!
===QA instructions
**Environment:** staging
**Browser & device:** mobile (iOS/Safari, Android/Chrome), desktop (MacOS/Safari, Windows/Chrome)
**Skin:** mobile/default, desktop/Minerva
**Steps:**
- visit a page on staging with a page issue banner, e.g. https://reading-web-staging.wmflabs.org/wiki/Devolution (if you don't see a page issue banner with a blue "Learn more" link you'll need to find a different page on staging that has an issue)
- tap the hamburger button to open the side nav
- verify that the white rectangle behind the "Learn more" link does not become visible as the dark overlay appears on top of the content page content (reference the images above for an example of what to look out for)
= Acceptance criteria / sign off steps
[] AC1: Check all z-index values are defined by variable
[x] AC2: The bug is fixed
== QA Results
| AC | Status | Details |
|AC1| ⬜ Not Run |Need instructions on validation of z-index values|
|AC2| ✅ Passed |T214550#4963044|