[英]Menu list not showing in Safari/iOS
I have a menu which is working perfectly in Chrome on Mac and Chrome on Android. 我有一个菜单,该菜单在Mac上的Chrome和Android上的Chrome中都可以正常运行。 But it doesn't work with Safari on Mac and Chrome/Safari on iOS.
但不适用于Mac上的Safari和iOS上的Chrome / Safari。
The menu items is correctly showed in source code and I can see the elements correctly placed if I hover the code in a browser inspector. 菜单项已正确显示在源代码中,如果将代码悬停在浏览器检查器中,则可以看到正确放置的元素。 The problem is that they are not actually showed in the browsers.
问题在于它们实际上并未显示在浏览器中。 It is like they are laying under det rest of the elements.
就像他们躺在其他元素之下。 I have tried with z-index without any luck.
我尝试使用z-index时没有任何运气。
Any help is appriciated. 任何帮助都适用。
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 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
Just add position to &-toggle: 只需添加位置并切换:
&-toggle
width: 100%
height: 100%
background: white
border: none
position: relative
display: block
z-index: 200000
我通过设置溢出:在我的.large标头中可见,然后溢出:隐藏在容器中来解决它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.