En una aplicación web de React que creé, me di cuenta al probar en iPhone que al hacer clic en el botón Cargar más, los usuarios están en la parte superior de la pantalla.
En escritorio o Android, cargará más productos a continuación y mantendrá el desplazamiento donde se espera. Parece ser específico del dispositivo y no específico del navegador.
¿Alguien se ha encontrado con este extraño comportamiento antes? ¿Algún problema con mi código?
El código del botón es el siguiente:
<button type="button" onClick={handleLoadMoreProducts} > Load More </button> El método handleLoadMoreProducts es bastante sencillo: obtiene los productos de la página siguiente y los agrega a la matriz; sin embargo, cambiar el evento onClick a solo console.log('Hello World') aún provoca el salto a la parte superior.
¿Algunas ideas? ¿Alguien más está experimentando esto?
Según este enlace: https://gravitydept.com/blog/js-click-event-bubbling-on-ios , el problema se debe a Safari. Safari on the iPhone does not support event delegation for click events, unless the click takes place on a link or input.
Una solución sugerida es hacer lo siguiente
if (gravdept.isIos()) { document.querySelector('html').classList.add('is-ios'); }Este fragmento se basa en una pequeña biblioteca de detección de agentes de usuario y en JavaScript simple.
Así que he encontrado el problema. Me concentré en el evento onClick y pensé que era algún tipo de comportamiento del navegador. Resulta que se debió a una clase CSS que se había agregado para admitir IE en cada tarjeta de producto @supports (display: grid) { display: grid; } Al eliminar esto, se arregló que la pantalla saltara a la parte superior. Supongo que es más importante que las cosas funcionen para IPhone IoS que los 2 usuarios que todavía usan IE en estos días.