Extra space when changing between portrait and landscape on tablets

• pure-react-carousel version: master
• react version: v16.8.6
• browser used: Chrome v 78.0.3904.108
• node version:

Relevant code or config:

N/A

What you did:

Change orientation from portrait to landscape on any tablet.

What happened:

If we are at the last slide and changing on landscape, there is a space left out to the right, past the limit that you can normally navigate using the navigation buttons. When we first navigate to the left, the space goes away and everything works fine.

Reproduction:

Attached some screenshots:

Tablet, scrolled to the last slide

Switch orientation to landscape -> see the space to the right

Navigate to the left and try go to the last slide -> normal behaviour

Problem description:

From what I saw, the problem comes from the translateX property value which at the last slide it is different on portrait/landscape. Also the currentSlide value is slightly different on landscape/portrait.

Not good for UX because when changing orientation you get in a state that you are not supposed to get into.

Suggested solution:

I’m not sure

[Alucard17]

@hectordommo can you create code sandbox example for it, it would be helpful.

[rhythms06]

The best workaround at the moment is probably listening for rotation events, and programmatically modifying currentSlide on those events of choice, as is mentioned in #272 and #116.