Magento2: 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 magento/magento2#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;
  }
}

[chirag-wagento]

@gwharton, Thanks for review my code.
I have fixed it and generated a new pull request
@magento-engcom-team can you please test and review my new code again

Thanks

[gwharton]

Updated PR #15471 working perfectly for me. Thanks @chirag-wagento

[ghost]

@gwharton, thank you for your report.
We've acknowledged the issue and added to our backlog.

[sidolov]

Hi @gwharton. Thank you for your report.
The issue has been fixed in magento/magento2#16994 by @ihor-sviziev in 2.3-develop branch
Related commit(s):

• f7228d01b3480fbeef95b0ebfe3591ec5ab75e56

The fix will be available with the upcoming 2.3.0 release.

[gwharton]

Just to confirm. This isnt fixed. The resolution applied to 2.2 and 2.3 is not a good one and needs relooking at.

[denistrator]

@sidolov +1. Please review #16994. It doesn't fix the issue but creates a new one

[sidolov]

Hi @denistrator , I guess your PR https://github.com/magento/magento2/pull/17006 contains fix for this issue and currently in status Delivery in progress. Also we have similar PR for the same problem: https://github.com/magento/magento2/pull/16981

[sidolov]

Hi @gwharton. Thank you for your report.
The issue has been fixed in magento/magento2#17006 by @denistrator in 2.2-develop branch
Related commit(s):

• 33a67bc81f4ce30810ecafde955ad0fb462d03e6

The fix will be available with the upcoming 2.2.6 release.

[gwharton]

Fix PR #17006 working well for me.

[sidolov]

Hi @gwharton. Thank you for your report.
The issue has been fixed in magento/magento2#17809 by @nmalevanec in 2.3-develop branch
Related commit(s):

• 5ca1f9cd74c9a686d3ece49d56a456153849deeb

The fix will be available with the upcoming 2.3.0 release.