Background position offset from bottom: opposite behaviour in Chrome and Firefox

Question

I found an opposite result in Firefox and Chrome when rendering a gradient background with offset set.

Here my css code:

html
{
   background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
   background-position: center top 30px;
}

body
{
   background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
   background-position: center bottom 100px;
}

The idea is to apply a sort of "Sliding doors" of background applying 2 opposite gradient onto html and body elements.

The problem rises when I set the bottom offset in Body tag: Firefox translates up with positive values, while Chrome translate up with negative values (or bottom with positive). So two major browsers have opposite behaviour.

How to solve this?

Answer 1

I found solution for Chrome!

It is sufficient to add

 background-repeat:no-repeat;

to BODY tag css declaration, as showed in this updated JsFiddle: