Chalarangelo/mini.css

iOS Menu Drawer not showing in sticky header

ciknowles opened this issue · 3 comments

ciknowles commented
  • Framework Version:3.0.0
  • Flavor used:nord
  • Operating System/Browser:Safari
  • Code to reproduce:
E Title
Help
Help
Help
		</header>
  • Bug description:
    This bug ONLY happens in safari. So affects iphone and ipad and safari on Mac.
    When a Header (sticky) contains a Menu Drawer the menu fails to display correctly. The parts of the menu outside the header are not displayed.

This be fixed by removing position:-webkit-sticky; for the css for header.sticky

header.sticky {
position:-webkit-sticky;
position:sticky;
z-index:1101;
top:0
}

ciknowles commented

The other way to fix it is to reverse the order of the position styles

Before:
header.sticky {
position:-webkit-sticky;
position:sticky;
z-index:1101;
top:0
}

AFter:
header.sticky {
position:sticky;
position:-webkit-sticky;
z-index:1101;
top:0
}

Chalarangelo commented

I have not managed to reproduce this bug so far. More information would be appreciated.

ciknowles commented

Hi,

I resolved this issue. I had assumed that the menu html would be in the header element. Looking at your example the label is but the rest is in a row.

Well done with minicss - nice features and not too many!