Chrome Update version 80 causes wrong calculation of Carousel track width on resizing

[alicemao23]

Describe the bug
Update to Chrome version 80.0 is creating error calculation on the window object's innerWidth value. Using mobile tools on different device size, and logging window.innerWidth renders 1500px for device width viewPort of 375, etc. Continuous resizing will compound the size of the window's innerWidth. This behaviour is not replicated in other browsers (tested on safari & firefox atm)

To Reproduce
Steps to reproduce the behavior:

1. Update chrome browser to version 80
2. Run a page with the carousel displayed on the DOM
3. Open the inspector tool to log window.innerWidth
4. See error

Expected behavior
window.innerWidth should be showing the same px as the px size of the viewPort

Screenshots

Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser: Chrome
• Version 80.0.3987.87

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[piotr-s-brainhub]

Thanks @alicemao23 for reporting.
So what's the latest Chrome version where it was working correctly?
Do you use the latest @brainhubeu/react-carousel version?

[sergueyarellano]

Yeah I have the same issue with chrome 80.

[alicemao23]

@piotr-s-brainhub I just updated the package version to latest, and the bug still persists. The latest version that the package was working correctly was version 79.

[piotr-s-brainhub]

I checked this bug occurs in Chrome 82.0.4062.3 (canary) as well.

[piotr-s-brainhub]

@alicemao23 @sergueyarellano

can't you use window.outerWidth and window.outerHeight instead?

[alicemao23]

@piotr-s-brainhub sorry I was away from internet for a few days. This is causing an issue because the react carousel repo itself is using window.innerWidth to set the width of the track - I was going through the code and saw that it may be used in the onResize function. Because of this, the track is being calculated wrong, and is stretching the carousel to be much wider than the screen width, hence breaking the UI when we're using it. We're not really using window.innerWidth, the react-carousel repo is.

[piotr-s-brainhub]

thanks @alicemao23

I used outerWidth in #288 so I'm going to compare the behavior on master and that branch.

[issuehunt-oss]

@piotr-s-brainhub has funded $15.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.