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 伪 class 是一种使菜单正常工作的不兼容方式。

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

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

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

css

iphone

transition