I recently restructured the page layout of my site to reduce the amount of wrapper <div>s needed. All is fine and dandy except for Firefox. I previously had a <div> that was the size of the browser viewport and contained all page content. This <div> had three background images that were layered and scaled based on viewport size so that the overall background looked correct on all device sizes. This was done with background-size: contain, contain, cover (image order was front-left, front-right, back-fill).
When I restructured the layout, the <body> tag replaced this <div> as the main viewport-sized container, so the background images are now placed on the body. In theory this should not have made a difference, and didn't on Chrome, Opera, IE, and Edge. In Firefox Quantum, however, the background images simply do not render at all. If I remove the background-size specifier, they render, but are obviously sized wrong.
I filed this as a potential bug on the Firefox support forums, and was told by one person that "Firefox is handling this correctly and Chrome, Opera, IE, and Edge are all wrong", and told by a second person to come here, which I have now done.
Was the first person right in saying that background-size: cover or background-size: contain on the body tag should make the background-image invisible, and that Chrome, Opera, IE, and Edge are all incorrect in handling this property as if it were on a <div> of the same size?
Or is this an actual bug in FF Quantum that needs to be addressed?
This behavior can be seen live here: https://angeldragons.com/home/credits. The background should appear and scale correctly in Chrome, but not FF Quantum.