Background Image Parallax Position Calculation on CSS3 Transform (on load of page)

I'm using CSS to preload the background image, while I wait for parallax to load.

I have been using a library from github for a javascript parallax scroll design (but... you can see image(s) jump as it moves from slide to slide on this site), but I've noticed when there is an offset between the image and page top the positionY of the image does not match the background-position: center center; background-size: cover; I'm unsure how on to to fix it.

As you can see in the screenshot background-image has opacity of 0.5 to show the difference in positionY between how CSS3 renders a background-image to DIV and how JavaScript renders the image position using transform on an IMG and Mirror DIV (ideally these images should line up with one another, and that would fix the "image jump")

Now if the transform is -81px (translate3d(0px, -81px, 0px) on the IMAGE element) Expected result would be.

Parallax JS Script

Parallax INIT Script

You can see the Effect of the "Image Jump" in these GIFS

Parallax (with Opacity Background)

Parallax (without Opacity Background)

This section is supposed to work out the Aspect Ratio of the image

        this.imageWidth = this.boxWidth;
        this.imageHeight = this.boxWidth / this.aspectRatio | 0;
        this.offsetLeft = 0;

        margin = this.imageHeight - imageHeightMin;

        if (this.positionY == 'top') {
            this.offsetBaseTop = imageOffsetMin;
        } else if (this.positionY == 'bottom') {
            this.offsetBaseTop = imageOffsetMin - margin;
        } else if (!isNaN(this.positionY)) {
            this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, -margin);
        } else {
            this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
        };

For positionX center positionY center = this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;

This section is the part that calculates the position of the IMAGE relative to the MIRROR (as far as I know mirrorTop is correct, but offsetTop is off by 26px)

        this.visibility = 'visible';
        this.mirrorTop = this.boxOffsetTop - scrollTop;
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
        this.offsetTop = 0;
        this.offsetTop = (this.offsetBaseTop - this.mirrorTop);
        this.offsetTop = this.offsetTop * (1 - this.speed);

HTML

<div class="slides main-slideshow-slide slide-5df2b37fd9bd5 pagecommand_slideshow_slide_item frm_slideshow_pagecommand_slideshow_slide_item cls_instance_cycle_slide_5df2b37fd9d09 omne-text-parallax-parent cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <div id="parallax-window-slide-5df2b37fd9bd5-0" class="omne-text-parallax-window" style="display: block;">
        <img src="http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg" class="parallax-slider-image" alt="banner01.jpg" style="display: none;">
    </div>
    <!--  -->
    <div class="widget-omne-slide-bgsplit omne-slide-bgsplit_img ">
        <div class="omne_slider_bg_con">
            <div class="omne_slide_bg_image" style="background-image: url('http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg'); width:1365px; height:400px;">
                <div class="omne_slide_bg_text">
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

HTML with DATA attributes

<div class="slides main-slideshow-slide slide-5df2b5ca37504 pagecommand_slideshow_slide_item frm_slideshow_pagecommand_slideshow_slide_item cls_instance_cycle_slide_5df2b5ca3760d omne-text-parallax-parent cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <div id="parallax-window-slide-5df2b5ca37504-0" data-parallax="scroll" data-parallax_debug="false" data-image-src="http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg" data-position="center center" data-position-x="center" data-position-y="center" data-slider-parallax-classes="normal_image" data-box-width-element="div.cls_instance_slideshow_con_5df2b5ca37608" data-box-height-element="div.cls_instance_slideshow_con_5df2b5ca37608" data-box-element="div.cls_instance_parent_con_5df2b5ca37605" class="omne-text-parallax-window" style="display: block;">
        <div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; height: 400px; width: 1920px; display: block; transform: translate3d(-8.5px, 90px, 0px);"><img src="http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg" class="parallax-slider-image normal_image parallax-slider" alt="banner01.jpg" style="visibility: visible; position: absolute; height: 562px; width: 1920px; max-width: none; transform: translate3d(0px, -108px, 0px);"></div>
    </div>
    <!--  -->
    <div class="widget-omne-slide-bgsplit omne-slide-bgsplit_img ">
        <div class="omne_slider_bg_con">
            <div class="omne_slide_bg_image omne_noparallax" style="width:1365px; height:400px;">
                <div class="omne_slide_bg_text">
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

I'm not sure whether I should write in DATA ATTRIBUTE that fixes the difference, or whether the MATH can be improved.. so that the images line up upon load of parallax.

I'm not sure whether this is relevant but my browser is firefox and my resolution is 1920x1080

from Background Image Parallax Position Calculation on CSS3 Transform (on load of page)