position: fixed and height: 100% on android chrome

[czirkoszoltan]

The current CSS rule for the overlay is:

#baguetteBox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This causes some problems on Android Chrome. When the overlay is open, and one scrolls the page up (ie. the page behind the overlay is still scrollable), the browser toolbar appears. This reduces the screen size, and unfortunately the Android version of Chrome resizes the fixed elements with a small delay. Therefore the size of the overlay is bigger than the screen for around 0.5 seconds, which will then cause the figcaption to overflow the bottom of the screen.

A partial solution is this:

#baguetteBox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

This helps to solve the problem, because the browser toolbar that is appearing when the user scrolls the page up modifies the top part of the screen. It still has some delay, however the position of the bottom part of the overlay is not modified, therefore the figcaption element (which is anchored to the bottom part of the overlay) will not move.

[feimosi]

Thanks for spotting that! I'm gonna need to test it myself before pushing a fix