css - 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制作菜单切换类