search

metafizzy / flickity-fullscreen

Enable fullscreen view for Flickity carousels
46 stars 17 forks source link

full screen entry image ratio is wrong #6

Open kiwichris opened 6 years ago

kiwichris commented 6 years ago

I have a slider with images of different widths and heights and I have borrowed from the Flickity options example for fullscreen image carousels centered in cells the CSS. I have:

carousel {
    background: #EEE;
}

.carousel-cell {
    min-height: 100%;
}

.carousel.is-fullscreen .carousel-cell {
    height: 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel.is-fullscreen .carousel-cell-image {
    height: 100%;
    max-width: 100%;
} 

.carousel-cell-image {
    display: block;
    margin-right: 5px;
}

The fullscreen slider works on Chrome on an old IOS iPad, Firefox on Windows 10 and FreeBSD, Edge on Windows 10 however and fails on a recent IOS with Chrome, Safari and Brave, Sarfari on MacOS, and Chrome on Windows. The images do not display when entering fullscreen with an incorrect aspect ratio as if the normal size is being used. The images are too narrow for the height. If I resize the browser while in fullscreen with Safari on MacOS all images are displayed correctly and stay that way. On Window's Chrome if I toggle display: flex; off then on in Chrome's inspector for the .carousel.is-fullscreen .carousel-cell all images are displayed correctly.

desandro commented 6 years ago

Thanks for reporting this issue. Could you fork the fullscreen demo to produce a reduced test case?

kiwichris commented 6 years ago

I have forked the demo to fs demo. It is not 100% the same as the issue I am seeing however I wonder if it some what related. With Firefox on FreeBSD (58.0.2) when full screen if I move the separator up and down the image's aspect ratio is maintained. I see the same thing on Edge on Windows. With Chrome on Windows the width does not change and so the image's aspect ratio changes.

desandro commented 6 years ago

Thanks, I'll have to take a look.

kiwichris commented 6 years ago

Thank you. I have managed to create exactly what I am seeing with fullscreen aspect ratio demo.

kiwichris commented 6 years ago

Anything I can do help figure this one out?

kiwichris commented 6 years ago

Anything I can do help figure this one out?

cutreth commented 4 years ago

Bump. I'm seeing this for Chrome on Windows as well. As mentioned above, toggling the CSS via dev tools solves the issue. Any suggestions on a hacky fix that could just do that toggle via JS?