Note to self: Old Safari, Android 2.3 and max-width: none

It seems some older browsers don’t correctly interpret element widths when both width: 100% and max-width: none are set.

I created a quick pen on CodePen to test this out. The test has two examples.

The first example should show the placeholder image at it’s natural width (300px). All browsers seems to get this right.

The second example with width: 100%; max-width: none; should show the image stretched to the full width of the red container. The value none is the default for max-width so the image should obey the 100% width declaration.

max width test: correct

However in some browsers (notably Safari before version 5.1) the image will revert to its natural size. This is a screenshot from Safari 4.0.5 for example:

max width test: incorrect

This seems to affect at least: IE6, Safari <5.1, and Android 2.3.

The solution seems to be to set: max-width: 100% on the child element to force it to occupy the full width on all browsers.

Old version of Safari make up a very small percentage of global usage but Android 2.3 is still pretty common so it’s worth watching out for.