Problem only in Safari 6 - CSS expert needed

HTML & CSS
1

I have this:

http://page-test.co.uk/safari6.html

…which works perfectly in every browser except Safari 6. If you change the browser width you will see two identical images (in every other browser) that remain the same size.

In Safari 6 the one on the right doesn’t play ball.

Just a note, adding:


svg {max-height:100%}

…was a fix that resolved this on every browser except Safari 6 (as they all had the problem before).

I have half an idea why this is happening (but no ideas as to a fix) but I guess a CSS expert will know straight away.

Any ideas?

(btw. I mean Safari 6 on Mac, not iOS 6 Mobile Safari which actually works great)