It seems that using the max-height media query is proving to be quite a challenge due to an issue with Chrome 67 on iOS.
The problem arises when users scroll on Chrome as it constantly adds and removes the address bar. This action causes the max-height value to change, resulting in a jumpy effect for elements styled using the max-height media query. For instance, if you have an image with dimensions of 300x500 but want to limit its height on shorter screens, a code snippet like this may be used:
@media (max-height: 700px) {
img {
max-height: 400px;
}
}
This effectively translates to "if the screen is short, make the image short as well". However, the issue becomes apparent on Chrome iOS, particularly on devices like the iPhone X, where the constant addition and removal of the address bar triggers the media query unnecessarily.
https://i.sstatic.net/EsR2A.gif
When scrolling on a page containing multiple images, near the bottom, the sudden jumps can disrupt the user experience significantly. It's worth noting that Safari on iOS does not exhibit this behavior despite also toggling the display of the address bar.
While adjusting the max-height value could potentially solve the issue temporarily, this workaround may not be effective across all devices of varying heights. As a result, relying on max-height to trigger certain styles appears to be flawed. Is there a more stable solution to achieve the desired outcome?