CODEWITHSUNDEEP
canvassafarisvgios5osx-lion
Davin
Davin

Reputation: 29

Canvas rendering bug only on Safari and only on iOS5 / Lion

I've never seen a browser bug quite like this one. It only happens on a specific Safari browser/platform combination. I get expected results with Safari 5.1.1 on iOS4 or Mac OSX Snow Leopard, but the bug occurs once I try Safari 5.1 or 5.1.1 only on Lion or iOS5.

This situation occurs when I embed a canvas element into an inline svg doc via the foreignObject element. The canvas usually respects all the svg transforms applied to the foreignObject and this works fine on Chrome/Firefox and Safari (iOS4, Snow Leopard). But when I use Safari on Lion, iOS5 the canvas renders without any transforms applied. The canvas render is also on top of all the SVG so no z-order is respected either.

What could have changed in Safari in the same version (5.1 / 5.1.1) between platforms (Snow Leopard / Lion)?

Any help is appreciated to find a work around.

EDIT: Looks like the rendering engine changed in Lion and iOS5 from Webkit1 to Webkit2 and introduced a ton of bugs. This one looks like the relevant one: https://bugs.webkit.org/show_bug.cgi?id=68635 Still looking for a workaround...

Upvotes: 0

Views: 672

Answers (1)

Vladimir Vujosevic
Vladimir Vujosevic

Reputation: 11

Depends on how are you linking your svg in the html. If it is external svg file than you should embed it like this and serve it as "image/svg+xml" 

<embed id="some_id" width="WIDTH" height="HEIGHT" src="youranimation.svg" name="animated_map" type="image/svg+xml">

If you are inserting it inline, i know some transforms and animations isn't working and don't know any workaround for this at the moment. I would recommend linking it externally how I described.

Upvotes: 1

Related Questions