Safari - Transition is not working in Safari ( Phone version) - css

Question

my visitors with the Iphone (Safari browser) complain that my menu isn't working. So I tried it in an emulator and found that there is not working hover or transition. On Android it's working all great.
/* Content menu */
.navigation_bg {
width:100%;
height:65px;
background:#272d33;
display:block;
}
.navigation_content {
min-width:400px;
height:65px;
max-width:1200px;
background:#272d33;
margin:0 auto;
text-align:center;
display: table;
width:100%;
overflow:hidden;
}
a.navigation {
display: table-cell;
vertical-align: middle;
border:0px;
text-align:center;
width:140px;
height:65px;
text-transform:uppercase;
font-weight:normal;
background:transparent;
overflow: hidden;
font-size:14px;
word-wrap: break-word;
padding-top:5px;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
a.navigation img {
height:35px;
width:35px;
}
a.navigation::after {
content: '';
display: block;
width: 100%;
height: 5px;
background: #f23030;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
position:relative;
top:23px;
}
a.navigation:hover::after {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
a.navigation:focus::after {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
a.navigation:active::after {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.mobile_menu {
display:none;
min-width:400px;
max-width:750px;
width:100%;
height:65px;
background:transparent url('../img/menu.png') no-repeat;
background-position: right 10px center;
}
#media only screen and (max-width: 750px) {
.mobile_menu {
display:block;
}
.navigation_content {
display:block;
background:#272d33;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
height:305px;
}
a.navigation::after {
top:10px;
}
a.navigation {
min-width:400px;
width:100%;
display:block;
padding-top:10px;
height:40px;
background:#272d33;
}
a.navigation img {
height:25px;
width:25px;
}
.navigation_bg {
height:65px;
overflow:hidden;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.navigation_bg:hover {
height:305px;
background:#f23030;
}
}
/* End Content menu */
<div class='navigation_bg'>
<div class='mobile_menu'>
</div>
<div class='navigation_content'>
<a href='/novinky' class='navigation white'>Novinky</a>
<a href='/navody' class='navigation white'>Návody</a>
<a href='/forum' class='navigation white'>Fórum</a>
<a href='' class='navigation white'>---</a>
<a href='/ostatni' class='navigation white'>Ostatní</a>
<a href='/social' class='navigation'><img src='img/yt.png' alt='Youtube'> <img src='img/fb.png' alt='Facebook'></a>
</div>
</div>
Do you have any idea where the problem could be?

Answer 1

There is an issue with hovering status and transition rendering iOs Safari. Note that busing an :hover pseudo-class is a non complient way to make menu works.
For example 2 ways to make a menu :
1. Use a label (linked to a hidden checkbox) and place it your toggle button
2. Use javascript to make menus toggle a class