Incorrect calculation by applyShift() function when used with owl carousel

[saurabhnanda]

Has anyone used image-focus with owl-carousel? Is it working correctly for you?

After a lot of debugging, I'm pretty certain that the debounceApplyShift function is being called as expected, every time the carousel changes positions. However, the position being calculated by applyShift is completely incorrect. Is it possible that the inline styles being applied by owl-carousel are causing a problem with image-focus's calculations.

<div class="owl-carousel">
  <div class="owl-stage-outer">
    <!-- 
       notice the following inline styles. The width overflows the entire viewport. 
       The -400px argument to translate3d changes as owl changes positions
    -->
    <div class="owl-stage" style="translate3d(-400px, 0px; 0px); width: 1600px">
        <div class="owl-item" style="width: 370px; margin-right: 30px;">        <!-- my content which contains an image-focus --></div>
        <div class="owl-item active" style="width: 370px; margin-right: 30px;"> <!-- my content which contains an image-focus --></div>
        <div class="owl-item active" style="width: 370px; margin-right: 30px;"> <!-- my content which contains an image-focus --></div>
        <div class="owl-item active" style="width: 370px; margin-right: 30px;"> <!-- my content which contains an image-focus --></div>
    </div>
  </div>
</div>

I'll try to put together a jsfiddle/plnkr in some time. But, please let me know if it's a known fact that the styles applied to the outer container interfere with image-focus's position calculations.

[saurabhnanda]

Here's a plnkr which demonstrates this issue - https://plnkr.co/edit/psVQ6vtBBYOKnjuk?preview

[saurabhnanda]

And if the underlying issue is what I'm suspecting it to be, this will be buggy with almost every carousel library.