Responsive Design, Footers do not snap to bottom of screen on mobile devices

[gwharton]

When you view Magento pages on a mobile device, the footers do not snap to the bottom of the page. They do in tablet and desktop modes.

Preconditions

1. Stock Magento 2.2.4
2. Luma Theme

Steps to reproduce

1. View on mobile device, or browser with Responseive design mode
2. Ensure screen size is taller than content

Expected result

1. Footer should be at bottom of screen

Actual result

1. Footer does not follow bottom of screen.

Here is a video

https://www.youtube.com/watch?v=pYe7uocqkTw

[DougPlumley]

Would this be related to the issue I've seen when scrolling to the bottom of a page on mobile and it snaps your view back up midpage?

[chirag-wagento]

I am working on this at #dmcdindia

[magento-engcom-team]

Hi @gwharton. Thank you for your report.
The issue has been fixed in #15353 by @chirag-wagento in 2.2-develop branch
Related commit(s):

• eef111fe2f7877515c8792bb710bda75a50e9a06

The fix will be available with the upcoming 2.2.5 release.

[gwharton]

I don't agree with the resolution of this issue to be honest.

Placing both footer and copyright at position absolute, bottom: 0 means that the footer is partially obscured by the copyright. It also means that pages that have content larger than one page, the footer stays on screen and the content disappears down behind the footer.

I would have though the best implementation would be to use the same method as the desktop layout and instead of the implemented changes, you would have something like this instead, to make the page full height, and grow the main content panel, effectively pushing the footer and copyright sections to the bottom.

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  html,
  body {
      height: 100%; // Stretch screen area for sticky footer
  }
  .page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .page-main {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    -webkit-flex-grow: 1;
    -webkit-flex-shrink: 0;
    -webkit-flex-basis: auto;
  }
}