0

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.

Arcanox
  • 1,420
  • 11
  • 20
  • hmm, I've tried it too, and it doesn't work for me. – rand0m Dec 11 '17 at 15:58
  • I'd say that yeah for some reason after tweaking around with it FF Quantum isn't supporting background-size. But the other issue is, it is just rendering the first image out of the 3 urls when the size property has been removed. Could be a potential bug. –  Dec 11 '17 at 16:02
  • 1
    I think it's the position: fixed that's causing it. Remove that and the images display as expected. – Billy Moat Dec 11 '17 at 16:03
  • @BillyMoat oh, good eye! I didn't even see that I had that property on ``. Still, I feel like it's a bug with Quantum. It rendered fine regardless in 4 other browsers, 2 of which are known for not rendering things correctly, and 2 of which *are*. – Arcanox Dec 11 '17 at 16:04
  • No, it isn't that because it's rendering fine on chrome. –  Dec 11 '17 at 16:04
  • Okay, so that fixed everything in Firefox. Oddly enough, now I'm having the same problem in Chrome Android. Just Android. Chrome Desktop works fine, but it looks to be that Chrome Android isn't treating the "bottom" of the body tag the same as desktop in regards to background images. Both show the body tag as 0px tall, but Android hides the background if it's set to bottom, whereas Desktop shows it...well, at the bottom. – Arcanox Dec 11 '17 at 17:31
  • Nevermind: fixed that with `width: 100%; height: 100%;` on `html, body`. – Arcanox Dec 11 '17 at 17:39

0 Answers0