Mobile breakpoints with `items: 1` are broken
on3dd opened this issue · 2 comments
Describe the bug
Mobile breakpoints with items: 1
seem to be broken.
To Reproduce
You can check it yourself in library docs using Chrome DevTools.
In this example, responsive
contains following breakpoint for mobile:
mobile: {
breakpoint: {
max: 464,
min: 0
},
items: 1,
partialVisibilityGutter: 30
},
But on iPhone SE it turns out with two columns (pic below).
Expected behavior
There should be only one full width column.
I figured out that it is kind of Chrome DevTools issue, see https://stackoverflow.com/questions/36297612/window-innerwidth-in-chromes-device-mode
I ran this library locally and modified Carousel's setItemsToShow
according to this answer, and it worked perfectly (pic below).
public setItemsToShow(
shouldCorrectItemPosition?: boolean,
resetCurrentSlide?: boolean
): void {
const { responsive } = this.props;
Object.keys(responsive).forEach(item => {
{ ... }
const widths = [window.innerWidth];
if (window.screen && window.screen.width) {
widths.push(window.screen.width);
}
const screenWidth = Math.min(...widths);
if (screenWidth >= min && screenWidth <= max) { ... }
});
}
Not sure if it can break something, but maybe we could have this?
Hi, the change merged in #382 appears to have broken the behaviour on iOS/iPadOS devices in landscape orientation. These devices report window.screen
as screen dimensions that are unchanged when switching between the portrait/landscape mode. Therefore, window.screen.width
is always the dimension of the shorter side of the screen, even in landscape. The change introduced in #382 uses this value as the viewport width for choosing the responsive breakpoint.
Downgrading to 2.8.2 fixed the issue.