I am using jQuery SVG to dynamicly draw some shapes which also have images as child elements. My markup look something like this
<g class="svg_hexagon" transform="matrix(1, 0, 0, 1, 0, 0) ">
<polygon points="377,191 327,278 226,278 176,191 226,104 327,104 377,191" stroke="none" fill="#ffffff"></polygon>
<g class="front_face"> … </g>
<g class="back_face" style="opacity: 0;">
<polygon points="377,191 327,278 226,278 176,191 226,104 327,104 377,191" stroke="none" fill="rgba(245,245,245,0.8)"></polygon>
<image x="303" y="191" width="47" height="47" preserveAspectRatio="defer xMaxYMax" href="resources/img/ui/future.svg"></image>
<image x="253" y="231" width="47" height="47" preserveAspectRatio="defer xMaxYMax" href="resources/img/ui/biceps.svg"></image>
<image x="203" y="191" width="47" height="47" preserveAspectRatio="defer xMaxYMax" href="resources/img/ui/future.svg"></image>
</g>
When the user hovers over an element (class: svg_hexagon) a scale and translate tranformation is beeing applied. transform="matrix(1.3, 0, 0, 1.3, x, y)
The scale affects all child elements of the hexagon shape, also the external images. The problem is, that the images are displayed blury in Safari 6.0.5 on Mac OS. It works fine in Firefox and Chrome on the same system.
Firefox
Safari
I found this bug, that might be related, see testcase here. This example is also working fine on FIrefox or Chrome but not in Safari although the bug as been flaged as "RESOLVED FIXED"
Is there a workaround to fix this in Safari? Maybe reload the image to prevent caching or something? Thanks for any help! =)