When displaying content such as images and trying to keep their size under control using the css max-width attribute, scroll-bars are being miscalculated during window resize and this causes glitches in the page layout. There is a minimal case which reproduces the problem at the end of this bug report. In order to reproduce the bug, make sure to resize the window so that the image is too tall to fit into the height of the window (of course it will always fit in the width of the window because of the max-width: 100%; constraint). Then, start resizing down the width of the window so that the image becomes shorter, and do so until the image becomes small enough so that the window is tall enough to display it completely. Doing this should make the vertical scrollbar disappear. Although, this is where the bug occurs. Sometimes instead of having the vertical scrollbar disappear, an horizontal scrollbar appears and the image becomes too large to fit into the window, and so it becomes too tall as well and both scrollbars remain visible. If you keep resizing the window in order to make it big enough to display the whole height of the image, and then make it too small, you'll notice many page layout glitches where the page layout seems to reserve space for the vertical scrollbar when it isn't even displayed, and other times where the content seems to believe there is no scrollbar to be displayed when in fact both the horizontal scrollbar and the vertical scrollbar are being displayed. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #imageWiki { max-width: 100%; } </style> </head> <body> <div id="contenu"> <div><img id="imageWiki" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Chat_%28Mandarine%29.jpg" alt="Envoyé par Delhovlyn le 1 novembre 2008 à 21:22" /></div> </div> </body> </html>
This doesn't seem to be an issue in Safari 15+.