Safari-过渡在Safari中（电话版本）不起作用

Question

我的使用Iphone（Safari浏览器）的访问者抱怨我的菜单不起作用。因此，我在模拟器中进行了尝试，发现hover或transition无法正常工作。在Android上一切正常。

/* 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>

您是否知道问题可能在哪里？

Answer 1

悬停状态和过渡渲染iOs Safari时出现问题。请注意，传递:hover伪类是使菜单工作不兼容的方法。

例如，两种制作菜单的方法：1.使用标签（链接到隐藏的复选框）并将其放置在切换按钮中2.使用javascript使菜单切换类