我有一个菜单,可以在 Mac 上的 Chrome 和 Android 上的 Chrome 中完美运行。但它不适用于 Mac 上的 Safari 和 iOS 上的 Chrome/Safari。
菜单项在源代码中正确显示,如果我将代码悬停在浏览器检查器中,我可以看到正确放置的元素。问题是它们实际上并没有显示在浏览器中。就像他们躺在其他元素之下一样。我试过 z-index 没有任何运气。
任何帮助都适用。
Ember
<div class="goodie-pack-menu">
<button class="goodie-pack-menu-toggle" {{ action "toggleMenu" }}>
<i class="fa fa-bars"></i>
</button>
<ul class="goodie-pack-menu-list {{ if open 'goodie-pack-menu-list--open' }}">
<li class="goodie-pack-menu-item" {{ action "setFilterId" null }}>{{ t 'generic.all' }}</li>
{{#each goodiePack.menuItems as |menuItem| }}
<li class="goodie-pack-menu-item" {{ action "setFilterId" menuItem.id }}>
{{ menuItem.name }}
</li>
{{/each}}
</ul>
</div>
CSS
.goodie-pack-menu
width: 100%
height: 100%
&-toggle
width: 100%
height: 100%
background: white
border: none
display: block
z-index: 200000
&-list
position: fixed
width: 100%
margin: 0
padding: 0
left: 0
list-style: none
background: #f9f9f9
display: none
&--open
display: block
&-item
padding: 20px 0
text-align: center
pointer-events: all
最佳答案
只需将位置添加到 &-toggle:
&-toggle
width: 100%
height: 100%
background: white
border: none
position: relative
display: block
z-index: 200000
关于javascript - 菜单列表未在 Safari/iOS 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42809495/