0
653
ViewsProblema de la barra de direcciones minimizada de iOS 15 con posición fija, contenido de pantalla completa
Con iOS 15.0.2 Safari, cuando se descarta el teclado en pantalla, la barra de direcciones se puede minimizar sin actualizar la altura de la ventana gráfica. Esto da como resultado un espacio en la parte inferior que no se puede eliminar sin presionar la barra de direcciones. ¿Hay alguna solución conocida para esto? Es posible llegar a este estado sin rotaciones de dispositivos mediante el uso de contenedores anidados, pero el ejemplo reproducible más simple que se me ocurrió es el siguiente:
- Girar a orientación horizontal
- Concéntrese en la entrada de texto para que aparezca el teclado en pantalla
- Girar a orientación vertical
- Presione "Listo" en el teclado en pantalla
body { padding: 0; margin: 0; overflow: hidden; position: fixed; inset: 0; -webkit-text-size-adjust: 100%; } input { font-size: 16px; } <head> <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#000000"> </head> <body> <input type="text" /> </body> 
1 answers
Answer question0
Recientemente me enfrenté al mismo problema, al establecer la position del cuerpo en fixed para bloquear el desplazamiento mientras se muestra una superposición. Tan pronto como se deshabilita el desplazamiento, Safari deja de representar el área inferior que estaría cubierta por la interfaz de usuario ampliada de iOS, dejando atrás la misma barra negra que se muestra en la captura de pantalla.
Establecer html.style.height en 100vh mientras el cuerpo está configurado en position: fixed parece solucionar el problema.
He creado una página de ejemplo simple donde puedes ver la diferencia. Después de abrir la página, debe desplazarse hacia abajo un poco hacia los botones para colapsar la interfaz de usuario de Safari. Luego puede alternar la position: fixed o la clase code-to-fix-error (para corregir el error) haciendo clic en los botones.
En mi ejemplo del bloqueo de desplazamiento: establecer la height en calc(100vh - 1px) también evitaría el efecto de desplazamiento elástico/banda de goma nativa de Safari mientras la ventana emergente está activa. Aunque este cambio solo debe aplicarse a dispositivos iOS.
const btnError = document.querySelector('button.error') btnError .addEventListener('click', () => { btnError.innerHTML = document.documentElement.classList.toggle('code-to-fix-error') ? 'Fix active' : 'Fix inactive' }) let y = 0 const btnToggle = document.querySelector('button.toggle') btnToggle .addEventListener('click', () => { const _doc = document.documentElement if (_doc.classList.contains('active')) { _doc.style.setProperty('--scroll-y', `0`) _doc.classList.remove('active') window.scroll(0, y) btnToggle.innerHTML = 'position: static' } else { y = window.scrollY _doc.style.setProperty('--scroll-y', `-${y}px`) _doc.classList.add('active') btnToggle.innerHTML = 'position: fixed' } }) body { padding: 400px 0 0 0; margin: 0; inset: 0; -webkit-text-size-adjust: 100%; background-color: #435283; text-align: center; height: 8000px; width: 100%; } html.code-to-fix-error.active { height: 100vh; } html.active body { top: var(--scroll-y); overflow: hidden; position: fixed; } button { appearance: none; line-height: 30px; padding: 0 10px; background-color: #FFF; color: #435283; border-radius: 3px; } <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#000000"> <style>/* styles here */</style> </head> <body> <button class="error">Fix inactive</button> <button class="toggle">position: static</button> <style>/* script here */</style> </body> </html>