Max-height ignored in Firefox, works in Chrome and Safari

user_474753 0
Viewed 21584

I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:

.display {
    max-width: 80%;
    max-height: 80%;
}

It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.

Thanks very much for any help.

firefox cross-browser css
6 Answers

Tried the proposed solutions without success, on Firefox 62.0, max-height animation is ignored.

There is also a delay when the max-height property is changed matching the duration of the animation.

user_17420550

Changing max-heigth to 80vh worked for me.

user_143345000
Related