spfx – Site Footer is not showing up in mobile devices


We have a publishing site in SharePoint Online and we created a SPFx extension that basically just injects this css:

div(class^="simpleFooterContainer-") {
  height: 80px;
  background: #333333 url('${this.context.pageContext.web.absoluteUrl}/SiteAssets/Logo.png') no-repeat center center;background-size: auto 42px;
}

It works well on every desktop browser; however, it does not work on any mobile browser. In fact the footer doesn’t even exist for mobile.

Side note: What we want is a footer that scrolls with the page, not a sticky footer.

Anyone know how to accomplish that in any browser, including iPhone and android mobile device browsers (Chrome and Safari)?