Safari - 转换在 Safari 中不起作用（手机版）答案

【问题标题】：Safari - Transition is not working in Safari ( Phone version)Safari - 转换在 Safari 中不起作用（手机版）
【发布时间】：2020-03-26 20:15:24
【问题描述】：

使用 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>

你知道问题出在哪里吗？

【问题讨论】：

标签： css iphone safari transition

【解决方案1】：

iOs Safari 的悬停状态和过渡渲染存在问题。请注意，使用:hover 伪类是使菜单正常工作的不合规方式。

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

【讨论】：