984312 - SVG foreignObject stacks on top when in a group with a transform attribute

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[flying sheep]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140215011251

Steps to reproduce:

Put a <foreignObject> and another element into a transformed <g> (in that order):

test case: http://codepen.io/flying-sheep/pen/yJwoh/


Actual results:

the foreignObject is always on top.


Expected results:

the stack order should be like everywhere else: later element on top.

Comment 1

[Oleg Torbasow]

There is the same in Windows 7.
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0

Comment 2

[flying sheep]

thanks, changing OS to “All”.

also changing branch to 29, because i still see it.

Comment 3

[flying sheep]

eh, whom do i have to bug to get this fixed?

Comment 4

[Jonathan Watt [:jwatt]]

This is because in bug 640917 we added a UA rule to give the nsSVGForeignObjectFrame's anonymous child frame a transform:

https://mxr.mozilla.org/mozilla-central/source/layout/svg/svg.css?rev=fb41517a5009#50

That makes the anonymous frame a stacking context.

Comment 5

[flying sheep]

how to circumvent it? reverting the change does nothing:

*|*::-moz-svg-foreign-content { transform: none !important }

Comment 6

[Jonathan Watt [:jwatt]]

That does not revert the change since author style style sheet !important rules are overridden by user-agent style sheet !important rules.

You should be able to work around this bug by putting transform="translate(0 0)" on the foreignObject, but really we should fix Mozilla so that that is not necessary.

Comment 7

[flying sheep]

for real, but all this is incredibly buggy everywhere, anyway.

chrome has the exact same bug for some time.

Comment 8

[Robert Longson [:longsonr]]

Seems to work now. I see test below in the example.