Stop updating scenes on virtual keyboard popup

[regmadrid]

Hello,

I have a form on a page with various section pins with scrollmagic. On android device, whenever the virtual keyboard pops in/out to fill in the fields, scrollmagic seems to recompute scene positions etc (sections have 100% height)... resulting in apparent scroll position changes, especially on field focusing out (and the virtual keyboard disapearing).

It seems that keyboard poping in/out triggers some kind of page resize event, trigering scrollmagic to update the scenes.

Is there a way to prevent this, like freezing updates on input focusing in and releasing the freeze on input focusing out? I tried disabling the controler but that results in jittering behaviour as well.

Note: same problem happens with the browser addressbar auto-hide funcionality as well but its less damaging to the design as the addressbar has smaller dimensions than the virtual keyboard.

Thanks in advance for support / or any suggestions.

Regis.

[krnlde]

You could try to disable Scenes temporarily with http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#enabled

But I know the browser address bar problem very well, which is really annoying. Personally I don't have a solution for that one.

Keep us posted with your approach.

[regmadrid]

Thanks for the suggestion but does not work any better than disabling the controller. Disabling the controller or the scenes desactivate scenes animation etc ... but in the logs update events are still fired: "event fired causing an update: resize", "updating Scene 1/15 (15 total)"...

Not sure it is a scrollmagic specific issue though...

Whenever the keyboard popups, window height is reduced and so are all sections that are 100% height, and the browser scrolls to the input that was focused (which has a scrollposition computed taken into account the new "reduced" dimensions of the sections and spacers). Then upon focusing out the input, the keyboard disapears, sections and spacers height is adjusted to the new window dimensions (the one before the keyboard showing) BUT scrollposition remains the one that was computed while the keyboard was showing and heights were reduced -> so it jumps backwards a few sections and the form isn't even visible anymore ...

This is how I deal with it : not using 100% height on mobile devices but fixed height I update

• on page load
• on orientation change (if no input is focused as keyboard showing up triggers the media query orientation change listener tooo!)
• and on resize event, if and only if new window height is higher than the previous one (deals with the addressbar problem too, at least with android as it fires the resize event when showing / hiding it)

That way elements height aren't re-computed when the keyboard shows up and the scrollposition remains unchanged. Not ideal but it's the best alternative I came up with.

/*function to detect mobile devices based on user agent and so on*/
if(jQuery.browser.mobile == true){

 /*overwrite height 100% by window height on page load*/
 $(document).ready(function(){
  $('html,body').css('height',$(window).height());
 });

 /*update height to window height on resize if new height is bigger - deals with addressbar hiding*/
 $(window).resize(function(){
  if($('html').height()<$(window).height()){
   $('html,body').css('height',$(window).height());
  }
 });

 /*update height on orientation change only if no input focused as the keyboard showing up triggers orientation change in media query listener too*/
 var mql = window.matchMedia("(orientation: portrait)");
 mql.addListener(function(){
  if($('input:focus').length == 0){
   $('html,body').css('height',$(window).height());
  }
 });

}