10

I am using relatively positioned HTML elements in an SVG foreignObject. However, in Chrome, the relatively positioned content isn't respecting scale() or viewBox. Consequently it isn't the right size.

Here is an example of my problem on jsFiddle. All three text snippets should appear the same size to the end users... but in Chrome they don't.

What's causing this?

Firefox Screenshot (as expected?)

The jsFiddle in Firefox

Chrome Screenshot (bug?)

The jsFiddle in Chrome

Richard JP Le Guen
  • 28,364
  • 7
  • 89
  • 119
  • Please note that removing the relatively positioning is not possible. – Richard JP Le Guen Apr 25 '12 at 14:38
  • If you truly must use relative positioning, it seems like you must run head first into this bug. Why are you not able to remove the relative positioning? Is the `foreignObject` content being generated by some source you don't control? – ellisbben Apr 27 '12 at 15:03
  • @ellisbben - Yes, and I'm also using the relative positioning to deal with [another Chrome SVG foreignObject bug](http://stackoverflow.com/questions/8185845/svg-foreignobject-behaves-as-though-absolutely-positioned-in-webkit-browsers). – Richard JP Le Guen May 01 '12 at 13:46

1 Answers1

3

Judging from the

24 bugs related to foreignObject on the WebKit tracker and the

19 issues related to foreignObject on the Chromium tracker,

it seems this is very likely unintended behavior. I encourage you to look at the WebKit bug list to see if this issue is known. If it is not, try to reproduce this error on another WebKit browser. If the issue is reproducible in e.g. Safari, submit it as a bug to WebKit; if not, submit it as a bug to Chromium.

My guess is that it is a WebKit bug; this bug looks kind of similar.

ellisbben
  • 6,352
  • 26
  • 43