1. Bottom bar spacing.
Since both browsers use a floating interface that changes the window height when scrolling up or down, the spacing cannot be set with just a padding-bottom value. Depending on the window position and device, this could cause an opposite effect, creating extra empty space. The only solution in this case is to use a special CSS environment variable called env(safe-area-inset-bottom), which we suggested in a previous response:
.wd-toolbar {
height: calc(55px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 1024px) {
.sticky-toolbar-on {
padding-bottom: calc(55px + env(safe-area-inset-bottom));
}
.sticky-toolbar-on .scrollToTop {
bottom: calc(67px + env(safe-area-inset-bottom));
}
}
However, there is another issue with Firefox Mobile, where env(safe-area-inset-bottom) does not work unless the parameter “viewport-fit=cover” is added to the viewport meta tag, which we also recommended adding in your child theme in our previous response:
https://codefile.io/f/0dgJtwxQNk
We checked your staging site and did not find our proposed code in your child theme. After temporarily adding “viewport-fit=cover” to your site, the floating spacing in Firefox started working correctly. Here is a video from a real iPhone device showing the result. (https://monosnap.com/file/1RFwPFARMC8vgrlljejIvyBNF2xjNh)
Additionally, it is important to note that “viewport-fit=cover” is not a standard viewport meta tag value and is not included in default WordPress themes such as Storefront or Twenty Twenty-Four. This setting can affect the browser window size on mobile interfaces, potentially causing unwanted issues in popular mobile browsers like Chrome and Safari, as well as on Android devices with different notch and sensor configurations.
Due to this, and the fact that Firefox Mobile users account for only 0.52% (https://gs.statcounter.com/browser-market-share/mobile/worldwide), we unfortunately for now cannot implement this setting in our theme, as it could negatively impact the browsing experience for users of more popular browsers.
2. Demo site Firefox issue.
Our demo site supports Chrome and Firefox. We tested our site on an iPhone using both browsers, and in both cases, the site functions correctly. Here is a video showing the results.
Chrome video: https://monosnap.com/file/tuWldurzKIpwtmvDvCb5nOmhhoMW73
Firefox video: https://monosnap.com/file/epNHjZEXarpf78KvX7pXkdPte3PEKA
To resolve the issue, please try clearing your browser cache or opening the site in an incognito tab.
Kind Regards
.
