Fixed position footer moving in mobile Chrome

123
June 15, 2018, at 7:00 PM

I have a position:fixed footer on a huge form that has been moving after opening the keyboard and scrolling a bit. It happens because the address bar shows/hides, and the footer moves the same height as the address bar, going up and down. The elements are actually visible where they should be, but touch events and inspecting via Chrome dev tools shows it is misplaced.

This screenshot shows this weird behavior: remote device inspect

I have tried forcing hide/show after focus in/out of inputs. I also tried the footer inside the container and after it. (and some other stupid ideas that didn't help). I thought about changing the element in every scroll, but this page has a form with 150 questions (some with sub-questions) and already is quite heavy.

Any ideas?

READ ALSO
Horizontally scroll a list within flexbox a layout with set-width sidebar

Horizontally scroll a list within flexbox a layout with set-width sidebar

I have a two-column layout with a tabbed UI in the main section and a sidebar attached to the right-sideOn larger screens, the width of the main column is fluid while the width of the sidebar should be set

73
Column won't align to middle of row in Rails

Column won't align to middle of row in Rails

So I have a fluid container in the application's view, and another container in the home view with 4 rowsThe first row has only one column that won't vertically align to middle of row

76
Cannot figure out website css

Cannot figure out website css

jobcull, I cannot figure out how to stretch the grey color at the bottom to fill the whole screen and also get rid of the white space near the bottom of the blockEverything that I've tried breaks everything else

77
Code reverts back to original theme after a while

Code reverts back to original theme after a while

Apologies for such an amateur question, I can't find the answer anywhere else after searching

92