A repeat-y background-image disappears/misaligns when zooming out

Question

The image disappears when zoomed out to 40% on Firefox. Up until zoom 50%, it is fine. However at zoom 40%, it just vanishes:

Whereas in Chrome the image is still visible but slightly misaligned, this happens at different levels of zoom:

For once Internet Explorer is actually displaying the expected result regardless of zoom!

What is trident doing differently to webkit and gecko, and how can I patch it?

Here is all the relevant code:

body {
  background-color: rgba(31, 59, 8, 1);
}
#main {
  z-index: 1;
  position: absolute;
  top: 113px;
  left: 50%;
  width: 900px;
  height: 100%;
  margin-top: 160px;
  background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
  background-repeat: repeat-y;
  margin-right: -50%;
  text-align: center;
  transform: translateX(-50%);
}
#main:before {
  content: " ";
  position: absolute;
  left: 0px;
  top: -113px;
  background-image: url('http://i.stack.imgur.com/7DE7i.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 113px;
}
#main:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -200px;
  background-image: url('http://i.stack.imgur.com/DVJAq.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 200px;
}

<div id="main"></div>

Answer 1

Making your body.png image 20px tall or so will fix the issue. 1px repeating images act strange sometimes. Should help with redraw/flickering while the element is loaded as well.

Also, setting the "#main:before" to have a top of -112px instead of -113px got rid of the funky line in Chrome when you zoom in (at least for me).

Hope that helps.