Image % sizing interoperability

Another class of issues we've encountered while investigating bugs is image sizing.

Consider the following two examples: http://jsfiddle.net/boggydigital/6D5Nc/


1)      Image has max-height: 100% and 50px on one of the grandparents. IE and Firefox resolve size using image intrinsic size, Chrome uses 50px.

2)      Is similar to 1, but uses height: 100% and 50px on one of the grandparents. Again, IE and Firefox do same thing and Chrome uses 50px for height.

In our investigations this was root cause for many interoperability issues on mobile sites such as Amazon.com, HM.com, SI.com and few others.

As with earlier textarea overflow question - we'd like to clarify the expected behavior here and ultimately achieve better interoperability.