safari - tamaño - iPad iOS Se rompe la posición fija cuando se abre el teclado
personalizar teclado iphone (7)
Aquí hay una solución hacky usando jQuery:
HTML:
<label for="myField">My Field:</label> <input type="text" id="myField" />
<!-- ... other markup here .... -->
<div class="ad_wrapper">my fixed position container</div>
CSS:
.ad_wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: rgba(0,0,0,0.75);
color: white;
text-align: center;
}
.unfixed {
position: relative;
left: auto;
bottom: auto;
}
JS:
$(function () {
adWrapper = $(''.ad_wrapper'');
$(document).on(''focusin'', ''input, textarea'', function() {
adWrapper.addClass(''unfixed'');
})
.on(''focusout'', ''input, textarea'', function () {
adWrapper.removeClass(''unfixed'');
});
});
La posición fija se rompe en el encabezado cuando hago clic en el campo de cuadro de texto "Formulario de búsqueda". Simplemente se separa de la parte superior de la página (como está arreglado allí) y comienza a flotar en el medio de la página cuando se abre el teclado virtual.
Normal:
Roto:
Corregido - Realicé un corte para empujar el encabezado a la posición de arreglo relativa una vez que se ingresó el cuadro de texto de Búsqueda. Este es un error en la implementación del teclado virtual iOS ya que rompe las posiciones fijas en los campos de texto SI la página es desplazable. Si el desbordamiento está oculto / la página no se puede desplazar, no se romperán las posiciones fijas cuando se ejecute el teclado virtual.
Aclamaciones.
En base a este buen análisis de este problema, lo he usado en elementos html y body en css:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
está funcionando bien para mí.
En nuestro caso, esto se solucionaría tan pronto como el usuario se desplace. Esta es la solución que hemos estado usando para simular un desplazamiento:
$(document).on(''blur'', ''input, textarea'', function () {
setTimeout(function () {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 0);
});
Lo que debe hacer es establecer la posición del cuerpo para que esté fija mientras el usuario está editando el texto y luego restaurarlo a la estática cuando el usuario termine. Puede hacer esto ya sea en enfoque / desenfoque (se muestra a continuación), o si un usuario está abriendo un modal, puede hacerlo en modo abrir / cerrar.
$("#myInput").on("focus", function () {
$("body").css("position", "fixed");
});
$("#myInput").on("blur", function () {
$("body").css("position", "static");
});
Me gusta mucho esta solución ( http://dansajin.com/2012/12/07/fix-position-fixed/ ). Lo empaqué en un pequeño plugin jQuery para poder:
- Establecer qué padre obtiene la clase
- Establezca los elementos a los que esto se aplica (no olvide "textarea" y "select").
- Establecer cuál es el nombre de la clase principal
- Permitir que sea encadenado
- Permitir que se use varias veces
Ejemplo de código:
$.fn.mobileFix = function (options) {
var $parent = $(this),
$(document)
.on(''focus'', options.inputElements, function(e) {
$parent.addClass(options.addClass);
})
.on(''blur'', options.inputElements, function(e) {
$parent.removeClass(options.addClass);
// Fix for some scenarios where you need to start scrolling
setTimeout(function() {
$(document).scrollTop($(document).scrollTop())
}, 1);
});
return this; // Allowing chaining
};
// Only on touch devices
if (Modernizr.touch) {
$("body").mobileFix({ // Pass parent to apply to
inputElements: "input,textarea,select", // Pass activation child elements
addClass: "fixfixed" // Pass class name
});
}
EDITAR: elemento innecesario eliminado
Todas las soluciones que he probado hasta ahora han fallado en un escenario para mí: la barra de navegación superior fija desaparecería tan pronto como se muestre el teclado en un iPhone. ¿Qué sucede si desea que el elemento fijo permanezca fijo en la misma posición incluso cuando se muestra el teclado? A continuación se muestra una solución simple que permite esto, con la ventaja de mantener el elemento fijo pegado a la parte superior mientras se desplaza por la página mientras el teclado está visible (es decir, con el foco aún dentro del campo de entrada).
// Let''s assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $(''#navbar'');
function fixFixedPosition() {
$navbar.css({
position: ''absolute'',
top: document.body.scrollTop + ''px''
});
}
function resetFixedPosition() {
$navbar.css({
position: ''fixed'',
top: ''''
});
$(document).off(''scroll'', updateScrollTop);
}
function updateScrollTop() {
$navbar.css(''top'', document.body.scrollTop + ''px'');
}
$(''input, textarea, [contenteditable=true]'').on({
focus: function() {
// NOTE: The delay is required.
setTimeout(fixFixedPosition, 100);
// Keep the fixed element absolutely positioned at the top
// when the keyboard is visible
$(document).scroll(updateScrollTop);
},
blur: resetFixedPosition
});
Para ver una demostración, ve aquí en tu iPhone:
http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk
Aquí hay una versión que usa requestAnimationFrame , pero no pareció funcionar mejor, así que me quedé con la primera versión porque es más simple: