html - notch - iphone 8 css

Los elementos fijos no se pueden hacer clic cuando me desplazo rápidamente a la parte inferior en iOS Safari 9+

Question

Me he encontrado con un problema muy molesto solo en iOS Safari 9+ (8.4 está bien) donde, una vez que el usuario se desplaza rápidamente por una página, se generan enlaces de anclaje dentro de elementos fijos que ya no se pueden hacer clic debido a la apariencia y al área real de clics / golpes. no se alinea con su elemento hasta que el usuario se desplaza de nuevo.

No sucede de la misma manera cada vez, y puede tomar algunos intentos para "romper" el sistema. El contenido debe ser más largo que la ventana gráfica para que esto funcione.

No hay soluciones al problema todavía. ¿Cómo puedo resolver este problema?

ACTUALIZACIÓN: Después de más pruebas, el problema solo ocurre con iOS Safari 9 y superior, probado en iOS 8 y no hay problema.

ACTUALIZACIÓN 2: Ahora está claro que esto sucede en la mayoría de los sitios web que usan position:fixed; e incluso position:-webkit-sticky; . Puede que quieras revisar el tuyo :)

HTML

<section>
  <article></article>
  <article></article>
  <article></article>
</section>

<div class="sticky">
  <a href=""></a>
</div>

CSS:

html, body {
  margin:0;
}

article {
  display: block;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  background: whitesmoke;
}

.sticky {
  width:100%;
  height:100px;
  position: fixed;
  bottom:0;
  background: orange;
  text-align:center;

}

.sticky a {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: yellow;
}

http://codepen.io/toobulo/pen/dGEodo

El problema no ocurre dentro del editor Codepen, ya que está relacionado con los cambios de tamaño de la barra de herramientas / elasticidad de Safari para dispositivos móviles. Por favor exporte el código a su propia página, o use el siguiente enlace:

https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html

Answer 1

Descubrí que la respuesta de Andy Jones solucionó este problema de manera efectiva para mí, pero tuvo un efecto secundario no deseado: el desplazamiento del impulso ya no funcionó. Esto hizo que el desplazamiento hacia abajo de páginas largas en un iPad se tomara para siempre.

La combinación de la respuesta de Andy con este truco de los trucos de CSS hizo que se pudiera hacer clic en mis enlaces y, al mismo tiempo, permitir el desplazamiento del impulso:

html,
body {
  height: 100%;
  overflow-y: scroll; /* must be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

También encontré que el width: 100% estilo width: 100% de la respuesta de Andy no era necesario, así que también lo eliminé.

Answer 2

Este problema está relacionado con el efecto de rebote en ios y la pérdida de la barra de herramientas y la barra de encabezado. La única forma que he encontrado para solucionar esto es hacer lo siguiente:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}

También puedes hacerlo en un punto de interrupción, por lo que solo funciona para dispositivos móviles. Espero que esto ayude.

** Añadido el desplazamiento de desbordamiento.

Answer 3

Puede hacer que .sticky sea un enlace absoluto y aplicar el siguiente CSS para que el enlace sea independiente de la ventana / navegador.

.sticky {
  width: 50px;
}
.sticky a {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}