Observing the element footer.mdl-mini-footer, I found that all the provided sizes were measured using F12 developer tools in Responsive Mode with a screen size of 768x884 (Chrome's Tablet breakpoint size).
In Firefox, the element footer.mdl-mini-footer has dimensions of width: 736px; height: 36px;.
In Chrome, the element footer.mdl-mini-footer has dimensions of width: 736px; height: 10.438px;.
The crucial aspect is the difference in height. In both browsers, the child element ul.mdl-mini-footer__link-list has dimensions of width: 268px; height: 36px;, leading to the footer's content sinking below the footer element.
It's worth noting that the style="padding: 8px 16px" on the footer element is not necessary for this issue to arise. It simply highlights the problem by reducing the default padding provided by Material Design Lite of 32px 16px. Specifically, the problem is that the footer's height decreases in Chrome as the content on the page requires more scrolling. This does not occur in Firefox, which is the intended behavior.
For thoroughness, I also tested the page in Microsoft Edge, which behaves exactly like Firefox. Additionally, adjusting Chrome's zoom level to 125% to align it better with Firefox's zoom level only worsens the issue, resulting in a new footer height of 8.297px.
Why does this discrepancy only occur in Chrome, and how can it be prevented?
Stack Snippet in Firefox: https://i.sstatic.net/mIma1.png
Stack Snippet in Chrome: https://i.sstatic.net/RwAiF.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.deep_purple-blue.min.css">
<script defer="" src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
</head>
<body>
<div class="mdl-layout__container">
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, at finibus orci odio at sapien. Morbi eu placerat nisl. Nunc rhoncus ut risus nec eleifend. Nulla facilitransicion. Morbi eget molestie magna. Duis quis neque interdum, elementum risus ac, interdum urna. Nunc fermentum
non nulla vel pharetra. In ullamcorper ac ipsum ut convallis. Morbi bibendum nisi vitae quam commodo porta.</p>
<p>Nam facilisis finibus libero vel consequat. Cras eu magna in dui ullamcorper aliquet nec vestibulum mi. Nam rutrum justo ac risus imperdiet consectetur. Donec pellentesque sapien nec euismod ullamcorper. Nam efficitur quam vitae justo convallis,
a aliquet justo finibus. Pellentesque auctor finibus neque sed dapibus. Ut maximus interdum risus ut viverra. Quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit at turpis. Nullam imperdiet urna eget elit
dignissim, ut feugiat nibh lacinia. Aliquam vel cursus est. Praesent tristique mauris a ex viverra, at vehicula nibh laoreet.</p>
<p>Curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. Donec eu ultrices tellus. Nam et quam nisl. Nulla facilisi. Donec turpis velit, tristique et ultrices sit amet, blandit vel tellus.
Nam ultricies posuere odio in pretium. Integer semper, lacus at pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis at sapien. Nunc ultrices sollicitudin diam ut semper. Nulla quis quam fringilla, pretium erat eu, hendrerit
tellus. Ut la...