iOS9 - même problème.
TLDR - source du problème. Pour la solution, faites défiler vers le bas
J'avais un formulaire dans une position:fixed
iframe avec id = 'subscribe-popup-frame'
Conformément à la question d'origine, lors de la mise au point d'entrée, l'iframe irait en haut du document par opposition au haut de l'écran.
Le même problème ne s'est pas produit en mode de développement safari avec l'agent utilisateur défini sur un périphérique. Il semble donc que le problème soit causé par le clavier virtuel iOS lorsqu'il apparaît.
J'ai eu une certaine visibilité sur ce qui se passait en enregistrant la position de l'iframe par la console (par exemple $('#subscribe-popup-frame', window.parent.document).position()
) et à partir de là, je pouvais voir qu'iOS semblait définir la position de l'élément à{top: -x, left: 0}
moment où le clavier virtuel apparaissait (c'est-à-dire concentré sur l'élément d'entrée).
Ma solution était donc de prendre cette embêtante -x
, d'inverser le signe, puis d'utiliser jQuery pour ajouter cette top
position à l'iframe. S'il y a une meilleure solution, j'aimerais l'entendre, mais après avoir essayé une douzaine d'approches différentes, c'est la seule qui a fonctionné pour moi.
Inconvénient: j'avais besoin de définir un délai d'expiration de 500 ms (peut-être moins fonctionnerait mais je voulais être sûr) pour m'assurer de capturer la x
valeur finale après qu'iOS ait fait son mal avec la position de l'élément. En conséquence, l'expérience est très saccadée. . . mais au moins ça marche
Solution
var mobileInputReposition = function(){
//if statement is optional, I wanted to restrict this script to mobile devices where the problem arose
if(screen.width < 769){
setTimeout(function(){
var parentFrame = $('#subscribe-popup-frame',window.parent.document);
var parentFramePosFull = parentFrame.position();
var parentFramePosFlip = parentFramePosFull['top'] * -1;
parentFrame.css({'position' : 'fixed', 'top' : parentFramePosFlip + 'px'});
},500);
}
}
Ensuite, appelez simplement mobileInputReposition
quelque chose comme $('your-input-field).focus(function(){})
et$('your-input-field).blur(function(){})