background-position not behaving consistently across browsers, specifically Firefox? - html

Question

I'm working on a site where we're using the background-image: url('') CSS property.
It works well, but it seems that background-position is calculated differently in Firefox than in Safari/Chrome.
In my code (below) the image to the right (right-floater class) doesn't seem to render the same. Open up the fiddle in both Firefox & Chrome to see what I'm talking about - in Firefox the positioning of the background image is much lower than in Chrome/Safari.
I'm using background-position: 50% 0%; which works well in Chrome/Safari but with Firefox it seems that background-position: 50% 100% gives the same results while 50% 0% end up making the site look pretty bad in FF.
I've tried to play around with a lot of the elements and it seems like this is the culprit...
What is going wrong?
body {
background-color: gray;
}
.left-floater {
height: calc(100vh - 75px);
width: 40vw;
background-image: url(https://cdn.shopify.com/s/files/1/2296/3395/files/TOMO-Website-R3-06.svg?10381558204658209910);
background-size: 50% auto;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
.right-floater {
background-image: url('https://cdn.shopify.com/s/files/1/2296/3395/t/2/assets/Sculpture.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 54vw;
height: calc(100vh - 75px);
display: inline-block;
background-position: bottom;
background-size: auto 100vh;
background-position: 50% 0%;
}
<div class="sticky-wrap">
<div class="left-floater"></div>
<div class="right-floater"></div>
</div>
View on JSFiddle