Huge background-image in Firefox disappear at least after resize

Question

I want to load a huge jpg with 48000x990px as background-image.

HTML:

<div id="car-canvas-wrapper">
  <div id="car-canvas" style="background-image: url('http://via.placeholder.com/48000x320');"></div>
</div>

CSS

html,
body {
  padding: 0;
  margin: 0;
}

#car-canvas-wrapper {
  width:100%;
  position: relative;
}

#car-canvas {
  background-size: cover;
  width: 100%;
  padding-top: 51.5625%;
}

You will find a example in CodePen: https://codepen.io/anon/pen/ypyMpZ

In Chrome, Edge, Internet Explorer and Safari everything works great. But in Firefox there are some heavy problems. Sometimes the image loads when i clean the cache. If its loads and i resize the window, the image disappear. In the inspector i see, after resize, that the background-image got 0x0px.

Obviously the picture is too big. Question: Why can all browsers except Firefox display the image?

Edit: I removed the huge image from my webserver and insert a placeholder image (48000x320px). Keep that in mind if you have a similar problem and read this thread.

Answer 1

Firefox fix on images could be more than just this simple solution but i have found this as a working solution on previous project.

Just add the following css:

#car-canvas-wrapper { display: block;}

Should do the trick.