full screen entry image ratio is wrong

[kiwichris]

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]

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

[kiwichris]

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]

Thanks, I'll have to take a look.

[kiwichris]

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

[kiwichris]

Anything I can do help figure this one out?

[kiwichris]

Anything I can do help figure this one out?

[cutreth]

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?