> 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!
= Acceptance criteria / sign off steps
[] Check all z-index values are defined by variable
[] The bug is fixed