New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android input overlay scrolling and mispositioning on focus #32

Closed
frequent opened this Issue Jul 31, 2012 · 1 comment

Comments

Projects
None yet
1 participant
@frequent

frequent commented Jul 31, 2012

I was happy I never ran into the yoyo-scroll on my Android until this morning... If I focus on an input element the page just goes into Autoscroll, jumping about a fourth of screen ever other second.

I tried fixing this with scrollTop (here), outline: none (here), as well as setting the respective elements css top:0 on focus.

I took apart my CSS and although I did not change anything on this element, this is the cause:

This is a fullscreen overlay above the actual page, which includes a form with the yoyo-causing input fields.

  .pop_fullscreen { 
       // safe
       margin-top: 0px !important; 
       top: 0px !important; 
       left: 0px !important; 
       right: 0px! important; 
       width: 100% !important; 
       height: 100% !important;
       // these 3 css rules cause the problem. 
     /*
 z-index:1005 !important;
 position: absolute;
 */
 overflow: hidden !important;
     }

The last three rules don't work together anymore. Using pos:absolute disables the keyboard and using z-index will cause the yoyo scroll. Only overflow seems to work.

@frequent

This comment has been minimized.

frequent commented Jun 18, 2013

some time ago, but I ended up having with the same problem on another project.

Possible causes and possible fixes

position:fixed & z-index seen here - this solved my problem

if you have an element with position:fixed and z-index on a page, any (all?) elements with position:absolute and using z-index must have a lower z-index value than the fixed element z-index.

-webkit-user-modify seen here

setting -webkit-user-modify: read-write-plaintext-only; on the input seems to help, when the issue is not position fixed/z-index

transform 3D/backface-visibility seen here

The function at the end of the thread is setting -webkit-perspective: 1000;-webkit-backface-visibility: hidden; on panel elements, which may also work. Modify to this, when using jQuery Mobile:

  var removeFlickerFixStyle = function () {
    document.getElementsByTagName('head')[0].removeChild(
      document.getElementById('flickerStyle')
    );
}

var addFlickerFixStyle = function () {
  var el = document.createElement('style');
    el.type = 'text/css';
    el.id = "flickerStyle";
    el.textContent = ".ui-panel{-webkit-perspective: 1000;-webkit-backface-visibility: hidden;";
    document.getElementsByTagName('head')[0].appendChild(el);
}

$(document)
  .on("panelbeforeopen", ".bare_panel", function (event, ui) {
    addFlickerFixStyle();
  })
  .on("panelbeforeclose", ".bare_panel", function (event, ui) {
    removeFlickerFixStyle();
  });

outline: none/overflow:hidden seen here

When working with dialogs, setting this on the <body> when opening and removing it again when closing a dialog seemed to help.

disable all

This disables all transforms and is a good starting point to search for other causes:

* {
    -webkit-transform: none !important;
       -moz-transform: none !important;
        -ms-transform: none !important;
         -o-transform: none !important;
            transform: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment