android - 伪元素 :after disapears on chrome mobile

Question

我有一个包含导航元素的页面，我想将其隐藏在页面的左侧/右侧，并在我将鼠标悬停在图标上时显示。我在要隐藏的元素上使用 :after 伪元素创建了图标。该解决方案在经过测试的桌面浏览器上运行良好，但在 chrome 移动版上运行失败(即使桌面版本运行良好)。

我在 iOS 和 Android 上测试过，没有一个能够显示 :after 伪元素。 但是 如果您碰巧点击了:after 应该位于的位置，菜单就会显示出来。所以看起来这只是一个显示问题。

我创建了 this jsfiddle显示问题。我添加了一些 javascript 只是因为它在真实页面上，但我认为这不是问题的原因。

更奇怪的是，在 iOS 上，chrome 和 safari 都可以在 jsfiddle 上显示 M 和 S，但在真实页面上无法显示图标。不过，Android 版 Chrome 也无法在 jsfiddle 上显示元素。

那么，我的问题是，如何在 Chrome 移动版或 iOS 浏览器上显示 :after 伪元素？

body, html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: white;
}

h1 {
  text-align: center;
}

footer {
  padding: 10px;
}

section {
  background: white;
  margin: 350px 0px 0px;
  padding: 10px 10% 25px;
  box-shadow: 0px 10px 20px rgba(120, 120, 120, 0.19), 0px -10px 10px rgba(150, 150, 150, 0.23);
  overflow: hidden;
  text-align: justify;
}

header div {
  position: fixed;
  text-align: center;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

header nav {
  display: block;
  position: fixed;
  width: 60%;
  top: 0px;
  bottom: 0px;
  right: 100%;
  background: #BBBBBB;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 3;
  overflow-y: auto;
}

header nav:hover {
  right: 40%;
  box-shadow: 15px 0px 20px rgba(100, 100, 100, 0.3);
}

header nav:after {
  display: block;
  position: fixed;
  padding: 15px;
  content: "M";
  top: 0px;
  left: 0px;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 4 !important;
}

header nav:hover:after {
  visibility: hidden;
  content: "x";
}

header aside {
  display: block;
  position: fixed;
  width: 60%;
  top: 0px;
  bottom: 0px;
  left: 100%;
  background: #BBBBBB;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 3;
  overflow-y: auto;
}

header aside:hover {
  left: 40%;
  box-shadow: -15px 0px 20px rgba(100, 100, 100, 0.3);
}

header aside:after {
  display: block;
  position: fixed;
  padding: 15px;
  content: "S";
  top: 0px;
  right: 0px;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 4 !important;
}

header aside:hover:after {
  visibility: hidden;
  content: "x";
}

<header>
  <div>
    <h1>
    Some Title
    </h1>
  </div>
  <nav>
    Some Menu
  </nav>
  <aside>
    Some Settings
  </aside>
</header>

<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id faucibus sem. Nullam venenatis arcu massa, sit amet sodales dui dapibus sit amet. Nunc est elit, feugiat a molestie a, eleifend vitae diam. Sed eleifend eros vel nunc cursus gravida. Nulla magna dolor, finibus non dolor a, auctor porta diam. Proin a justo ultrices, semper dolor sit amet, maximus leo. Proin vehicula tincidunt tortor, gravida pellentesque risus sollicitudin vel. Cras lacinia luctus tellus in consectetur. Morbi facilisis nec justo ut condimentum. In semper vestibulum libero, non vestibulum lacus efficitur sed. Proin laoreet convallis tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porta ligula odio, quis hendrerit nisl accumsan ac. Mauris aliquam cursus ultricies. Curabitur luctus, mi auctor bibendum interdum, mi arcu luctus lorem, at ornare nunc felis et lorem. Maecenas ut hendrerit arcu.
</section>
<footer>Some footer text</footer>

Answer 1

不确定移动浏览器发生了什么，但删除了 overflow-y: auto;来自 header nav和 header aside似乎在工作。

但是，如果您确实需要滚动条，您可以将另一个元素(即 <ul> )添加到 <nav> 中.

header nav ul {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  padding: 0;
  margin: 0;
  overflow-y: auto;
}

参见 updated jsFiddle .