Owlcarousel2: Calculates wrong width when surrounding div has overflow style on non-mobile devices

[Fensterbank]

Same issue as in OwlCarousel: https://github.com/OwlFonk/OwlCarousel/issues/410
I did not found a similiar issue here, but for me it's broken in Firefox and Chrome.

On init the width is beeing calculated wrong most times, so you can see a bit from the next slide.

It's only happening in Firefox and Chrome and has something to do with desktop/mobile and/or touch detection.

The bug does not occur when I open the Responsive Design Mode (Firefox) or Toggle device toolbar (Chrome) in Mobile mode.

The bug does occur when I switch to Desktop mode.

Steps to reproduce:

• Toggle Device Toolbar (Chrome) or switch to Responsive Layout Mode (Firefox)
• Select device type Desktop:
  
  
  
  • The calculated width of owl-item is 17px smaller than the estimated width of owl-stage-outer which shows a bit from the next page.
  
  
• Select device type Mobile:
  
  
  
  • The calculated width is correct.
  
  

I've still no idea, which property triggers the issue. It's not the userAgent which is changed by Chrome when using mobile mode but it's not changed by Firefox in the Responsive Design Mode.

[pascalporedda]

(Sorry about the canned reply.)

You have not added a link to a working live example.

Please add a link to a page where I can verify this error. You can use a service like jsfiddle, plnkr, jsbin or codepen.

And make sure you're using the latest Owl Version! I will close this issue for now, once you provided a working example you can reopen it.

[Fensterbank]

Indeed it was more difficult to reproduce in a new environment than I thought.
Here you find a working example of the issue: https://jsfiddle.net/hcsheL98/2/

The bug seems to be caused by the overflow-property of the surrounding container.
If it is set, the width of the owl-page is calculated wrong.
You can validate it by removing the style-property of the .root container.

This bug does not occur, if you are in Mobile device mode (e.g. by toggling device toolbar in chrome and set device to Mobile). Could have something to do with the fact, that scrollbars on mobile devices normally doesn't have a fix width inside a container.

Finally I can solve the issue for me by just removing the overflow property from the surrounding container, but it still seems to be a weird bug.

@pascalporedda Can you please reopen?

[jamilalisgandarov]

Same for me

[honsa]

same here, it looks like owl save the space for the browser scrollbar but there is no.

[tushgraph]

Resolved using
stagePadding: 10, margin:40

https://jsfiddle.net/tushgraph/q0v0qd6g/2/#&togetherjs=Jz2EQtlNhJ

[haseebtariq8080]

Thanks resolved issue.