I have a problem with my site displaying on Safari on iPhone.
It works fine on Chrome and Firefox on mobile screens. On Safari the div with menu hamburger disappears.
Look at the screenshots below:
The site on Chrome/Firefox:
The site on Safari:
Do you have any idea why it breaks on Safari? I would be very grateful for any tips.
Here is the link to the site: https://sylwiavv.github.io/blood-donation-landing-page-starter-master
Here is the link to the source code: https://github.com/sylwiavv/blood-donation-landing-page-starter-master
Thanks!
It is because of the overflow-y: hidden
in style.css
( Repo ) line 169.
.overlay{
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:#f995c2;
/* overflow-y:hidden; /* Remove this line */
transition:0.6s;
}
Removing it works! Even setting the rule with appropriate width
and height
like this way works:
.overlay{
height:75px;
width:100%;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:#f995c2;
overflow-y:hidden;
transition:0.6s;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.