Bug 83189 – Canvas inside SVG(foreignObject) positioning error

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: SVG

[olamothe]

Overview 
A positioning error occur when a canvas is placed inside a foreignObject tag. If the canvas is drawn with hardware acceleration , the transform attribute is not applied correctly.
Probably related in some way to : https://bugs.webkit.org/show_bug.cgi?id=71819

Step to reproduce :

Go to  : http://jsfiddle.net/olamothe/QZRf3/ 
Change the canvas width between 256<-->257

Actual results :

The transform attribute is not applied correctly when the canvas size is over 257. Canvas is moved to (0,0)

Expected results :

Canvas should always be at (100,100) I.E : the transform-translate attribute


Additional information :

Chrome 18.0.1025.142
Mac OS X 10.6.8

The underlying problem is not really the canvas size, it's actually when the canvas is being rendered with the aid of the hardware. It just so happen that in chrome 18 , canvas over 256 pixel in width or height are rendered with the aid of the GPU. The same effect can be achieved with safari 5.1.5 if you force it to render with hardware ( eg : -webkit-transform : translateZ(0) )
It is also not only linked to the canvas tag. For example if you replace the canvas with a div in the jsfiddle , and apply a CSS 3d transform, the same thing happen.

[Dmitrijs Balcers]

I have reproduced the same issue.

[Ahmad Saleem]

I am still able to reproduce this using attached test case in Safari 15.5 and Safari Technical Preview 146 on macOS 12.4. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/94259941>

[Simon Fraser (smfr)]

*** This bug has been marked as a duplicate of bug 23113 ***