Bug 23113

Summary:

Layer content inside HTML in SVG foreignObject renders in the wrong place

Product:

WebKit

Reporter:

Simon Fraser (smfr) <simon.fraser>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

agafvv, apple, artem.babich, bdakin, bernhard, b.houdusse, bramus, bruckner.roman, colsen.sean, comexk, eda-qa, eric, esprehn, fabien.snauwaert+webkit, fmalita, fred.wang, gasol.wu, gereoudakis, hyatt, ian, info, jay, jcubic, john.j.reilly, karlcow, kbr, kdolan, kerry, knorton, maggotfish, mark, mattgwwalker, mokone91, olivier_lamothe, pnormand, rezunenkotimur, rjohnston, rlandry56712, rob, sabouhallawa, sheinlinphyo, silvan.muehlemann, silviapfeiffer1, simon.fraser, sinish, terrence, thorton, vikramhegden, w07m, webkit-bug-importer, william.spitzer, woodlxf00, xiao.hk1997, xidorn-webkit, zalan, zimmermann

Priority:

Keywords:

BrowserCompat, CanvaBug, InRadar

Version:

528+ (Nightly build)

Hardware:

Mac

OS:

OS X 10.5

See Also:

https://bugs.webkit.org/show_bug.cgi?id=165516
https://bugs.webkit.org/show_bug.cgi?id=213788
https://bugs.webkit.org/show_bug.cgi?id=270317
https://bugs.webkit.org/show_bug.cgi?id=149388

Bug Depends on:

90738

Bug Blocks:

Attachments:

Description	Flags
Testcase	none
Work-in-progress patch	none
Another work-in-progress patch	none
foreignObject and positioning bug	none
Showing defect using scrolling section	none

Simon Fraser (smfr)

Reported 2009-01-04 20:17:43 PST

When HTML content inside an SVGForeignObject gets a RenderLayer for whatever reason, then it renders in the wrong place. I guess this happens because the RenderLayer hierarchy does not extend through the SVG renderers, so the HTML RenderLayers have no knowledge of the SVG transforms etc.

Attachments
Testcase (740 bytes, image/svg+xml) 2009-01-04 20:18 PST, Simon Fraser (smfr)	no flags	Details
Work-in-progress patch (12.46 KB, patch) 2009-02-27 09:37 PST, Simon Fraser (smfr)	no flags	Details Formatted Diff Diff
Another work-in-progress patch (14.13 KB, patch) 2012-02-03 13:55 PST, Florin Malita	no flags	Details Formatted Diff Diff
foreignObject and positioning bug (2.54 KB, text/html) 2020-02-21 08:46 PST, fabswt	no flags	Details
Showing defect using scrolling section (484.21 KB, image/png) 2020-07-17 00:11 PDT, Edaqa Mortoray	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 2009-01-04 20:18:13 PST

Created attachment 26421 [details] Testcase

vikram hegde

Comment 2 2009-02-25 23:07:38 PST

Hi, i have found out that in the html code if i remove the sytle attribute for div element the text inside the div element is renderred in the correct place and the bug is not seen> also if i change the opacity value of div to 1.0 the bug is not seen. It looked strange. could anyone put more light on this.

Simon Fraser (smfr)

Comment 3 2009-02-25 23:24:13 PST

Yes, the problem is that the RenderSVGForeignObject does not have a RenderLayer, so that layers inside the HTML are not positioned correctly.

vikram hegde

Comment 4 2009-02-26 00:41:57 PST

Actually i dont think its the case in every html object, the bug is seen only when we apply opacity, if we remove opacity everrything works perfectly fine.And also other html elements are getting rendered properly. could you please brief more on this.

Simon Fraser (smfr)

Comment 5 2009-02-26 08:42:35 PST

Opacity makes a RenderLayer in the HTML. That RenderLayer is parented currently in the SVGRoot's layer, not the foreignObject's layer, so ends up in completely the wrong places. Are you planning to work on this bug?

vikram hegde

Comment 6 2009-02-26 10:26:59 PST

(In reply to comment #5) > Opacity makes a RenderLayer in the HTML. That RenderLayer is parented currently > in the SVGRoot's layer, not the foreignObject's layer, so ends up in completely > the wrong places. > Are you planning to work on this bug? yes i am planing to work on this bug.which would be the better place or approach to resolve the issue?

Simon Fraser (smfr)

Comment 7 2009-02-26 10:30:07 PST

I have a hacked-up patch that I can attach when I get home. It has a number of issues, though.

Simon Fraser (smfr)

Comment 8 2009-02-27 09:37:02 PST

Created attachment 28077 [details] Work-in-progress patch Here's a work-in-progress patch. There are a number of things wrong with it: * The RenderBox.cpp change needs cleaning up (see bug 23111 for some comments about that) * The way that the layer paints with the ancestor transform seems weird * Some SVG layout tests are broken

Simon Fraser (smfr)

Comment 9 2009-02-27 09:37:37 PST

Note that if you fix this bug, you'll probably fix bug 23111 too.

Nikolas Zimmermann

Comment 10 2010-07-08 02:19:28 PDT

Changed component to SVG, so it shows up in my all-svg-bugs search.

Silvia Pfeiffer

Comment 11 2010-08-12 01:59:12 PDT

I have a similar problem, where I have a foreignObject in a <defs> and cannot apply a mask to it, because the foreignObject keeps getting rendered. I hope it can be fixed with the same fixes - if not, I can open a new bug. <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="270px" width="480px"> <mask id="c1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> <circle id="circle" cx="240" cy="135" r="135" fill="white"/> </mask> <defs> <g id="videoGroup"> <foreignObject width="100%" height="100%"> <body xmlns="http://www.w3.org/1999/xhtml"> <video id="vid" class="target" height="270px" width="480px" controls="controls" autoplay="autoplay"> <source src="http://annodex.net/~silvia/itext/chocolate_rain/chocolate_rain.mp4" type="video/mp4"/> <source src="http://annodex.net/~silvia/itext/chocolate_rain/chocolate_rain.ogv" type="video/ogg"/> </video> </body> </foreignObject> </g> </defs> <use xlink:href="#videoGroup" mask="url(#c1)"/> </svg>

Eric Seidel (no email)

Comment 12 2010-08-12 05:51:49 PDT

The foreignObject inside a defs sounds like a separate bug, please file. :) CCing Ken, because his latest work needs to be aware of the possible interaction issues between layers and SVG.

Silvia Pfeiffer

Comment 13 2010-08-12 06:07:07 PDT

OK, done, see https://bugs.webkit.org/show_bug.cgi?id=43911

Tim Horton

Comment 14 2011-07-28 15:44:07 PDT

<rdar://problem/8912810>

Florin Malita

Comment 15 2012-02-03 13:55:39 PST

Created attachment 125408 [details] Another work-in-progress patch I've updated Simon's patch and it works pretty well for the issue at hand (still a couple of rough edges to fix). There's a major limitation with this approach though: the SVG paint context is lost with a separate layer - hence masks, filters, etc. on the FO's ancestor elements are not applied to embedded content. I can't think of a way around this that doesn't involve some major RenderLayer surgery, so any ideas/comments are much appreciated.

Simon Fraser (smfr)

Comment 16 2012-02-04 09:51:14 PST

(In reply to comment #15) > I can't think of a way around this that doesn't involve some major RenderLayer surgery, so any ideas/comments are much appreciated. I don't think there is an easy way. We'll probably have to glue RenderLayers together across foreignObject boundaries. We'd need one layer that knows all about the SVG transforms.

Florin Malita

Comment 17 2012-02-15 11:07:55 PST

There is also a stacking problem: SVG specifies that elements are rendered in implicit order (elements should be "covering" their same-fragment predecessors). To preserve these semantics, we'll probably have to group FO sibling elements into additional synthetic layers to be composited in implicit order - pre-FO layer, FO layer, post-FO layer. Otherwise regular elements following a FO will be covered by it.

Nikolas Zimmermann

Comment 18 2012-02-15 14:47:48 PST

(In reply to comment #17) > There is also a stacking problem: SVG specifies that elements are rendered in implicit order (elements should be "covering" their same-fragment predecessors). To preserve these semantics, we'll probably have to group FO sibling elements into additional synthetic layers to be composited in implicit order - pre-FO layer, FO layer, post-FO layer. Otherwise regular elements following a FO will be covered by it. Exactly! I had fO + layers working until this point :-) This is the really problematic thing. Any SVG renderer would need to check if it follows a <fO/> - if yes, it has to return true for requiresLayer - probably requires some plumbing in RenderSVGBlock, RenderSVGInline, RenderSVGModelObject (+ another base class I probably forgot). Once that works, we need testcases which moves <svg><g id="g1"/><fO/><g id="g2"/>.... eg. g1 behind g2, etc, to make sure we handle updates of the "pre-Fo layer, FO-layer, post-fO-layer" states properly. I could think of more tricky test cases as well... Are you planning to work on that?

Florin Malita

Comment 19 2012-02-16 07:52:31 PST

(In reply to comment #18) > Exactly! I had fO + layers working until this point :-) This is the really problematic thing. Any SVG renderer would need to check if it follows a <fO/> - if yes, it has to return true for requiresLayer - probably requires some plumbing in RenderSVGBlock, RenderSVGInline, RenderSVGModelObject (+ another base class I probably forgot). My initial thought was to group the elements following a FO into a hidden container and only create one additional layer. But that can be probably implemented later as an optimization (if needed at all) - your idea seems much more straightforward. > Are you planning to work on that? Sure, I've been chipping at this issue long enough now that I might as well keep doing it :) Do you have a saved patch that you can share?

Elliott Sprehn

Comment 20 2012-11-05 11:22:47 PST

*** Bug 101237 has been marked as a duplicate of this bug. ***

Philip Rogers

Comment 21 2014-04-15 20:24:08 PDT

*** Bug 131492 has been marked as a duplicate of this bug. ***

Said Abou-Hallawa

Comment 22 2019-08-02 15:29:37 PDT

*** Bug 165516 has been marked as a duplicate of this bug. ***

Said Abou-Hallawa

Comment 23 2019-08-02 15:31:14 PDT

*** Bug 200383 has been marked as a duplicate of this bug. ***

Said Abou-Hallawa

Comment 24 2019-08-02 15:33:58 PDT

*** Bug 32218 has been marked as a duplicate of this bug. ***

Said Abou-Hallawa

Comment 25 2019-08-02 15:35:39 PDT

*** Bug 198660 has been marked as a duplicate of this bug. ***

Jay Wang

Comment 26 2019-12-19 17:24:37 PST

Having the same issue with <foreignObject>. Any work on this issue?

fabswt

Comment 27 2020-02-21 08:46:44 PST

Created attachment 391404 [details] foreignObject and positioning bug Attaching a test case. It demonstrates the issue with `transform` breaking the positioning of foreignObject's children. It also shows a workaround: `position: fixed` can be used to prevent the issue. Problem is it can't be used just anywhere. In any case… This is a basic SVG functionality that's broken. Any chance to get a fix? It's been open for 11 years now.

Timur

Comment 28 2020-03-24 06:23:00 PDT

I encountered this problem. When will it be resolved? There has been no progress for 11 years. Please speed up the solution of this problem.

chototoro

Comment 29 2020-03-30 11:43:51 PDT

I was about to file a bug regarding foreignObject content not being correctly scaled when using the zoom command +/- in Safari, but i think it is related to this bug. As previous comments said, it occurs on elements with positioning, opacity, or transform. Here is a test-case where the layout is fine, until you zoom in or out the page: https://codepen.io/chototoro/pen/gOpqjEX

Edaqa Mortoray

Comment 30 2020-07-17 00:11:23 PDT

Created attachment 404542 [details] Showing defect using scrolling section This shows the defect using a div which contains a scrollable section. The inner-document has these CSS settings: ``` .inner-document { font-size: 28px; overflow-y: auto; width: 100%; height: 100%; } ``` The moment the size exceeds the space to the foreignObject the render error happens.

Nikos

Comment 31 2020-09-01 12:40:46 PDT

any updates? no wonder people call safari the new ie)

eldar

Comment 32 2020-10-05 09:33:10 PDT

Same issue in Safari v14.0 is there any chance to get this fixed?

terrence

Comment 33 2020-12-06 01:47:29 PST

This issue was also on chromium but has now been fixed in chrome 87 - which was stable as November 17th, 2020 The chromium bug is here: https://bugs.chromium.org/p/chromium/issues/detail?id=976224 which is a duplicate of this related bug: https://bugs.chromium.org/p/chromium/issues/detail?id=738022&q=foreign-object The test case used for this bug was: https://codesandbox.io/s/chrome-foreignobject-defect-wf91j This test currently passes on the chrome 87 but fails on safari 14. Would be great if this could fixed to have standardized SVGForeignObject behavior.

terrence

Comment 34 2020-12-06 02:00:40 PST

this test: https://srguiwiz.github.io/foreignobject-zoom-issue/foreignobject-zoom.htm seems like the best way to reproduce issue. this test was comment in: https://bugs.chromium.org/p/chromium/issues/detail?id=976224

terrence

Comment 35 2020-12-06 02:00:58 PST

William Spitzer

Comment 36 2020-12-10 14:46:54 PST

I encountered this bug as part of my workflow and found that the issue that was causing it was due to position: relative/absolute elements in the foreignObject. I made a demo to show the differences in behavior (try in chrome vs safari) https://jsfiddle.net/hkctay9z/2/ This is a pretty big blocker which prevents usage of foreignObject in Safari for our project. Hopefully the demo provided will help the bugfix.

Rob Johnston

Comment 37 2021-04-07 13:50:12 PDT

We've hit this one too. We use SVG content that includes embedded iframes to deliver advanced "touchscreen" layouts to our users. Now that this technique works on Chrome, we're shipping a product that works most everywhere except for Safari.

Artemy

Comment 38 2021-07-12 10:57:35 PDT

Hi, Our customers faced the same issue when are using one of our HTML/JS components. I reproduced the issue using a simple HTML markup, Check the following sample: https://codesandbox.io/s/templates-devextreme-diagram-forked-56vuc?file=/CustomShapeTemplate.vue Would you please inform me if this issue is fixed? Thanks, Artemy DevExpress

Mark

Comment 39 2021-08-06 21:38:53 PDT

Also experiencing this issue with a major customer, reading StackOverflow and elsewhere, I get the express feeling that many people are being affected by this. Depends on 90738 which seems to be progressing at least. It's not great that customers have to use another browser, and of course you're out of luck on iOS and iPadOS. Can anyone give any indication of what is happening with this bug?

Patrick Spiegel

Comment 40 2022-01-04 03:07:18 PST

This is a major issue. This is an issue that makes it impossible to user Safari properly. This should get a higher priority as there is no possible work around beside using a different browser.

kshetline

Comment 41 2022-03-17 19:59:40 PDT

I'm running into a problem with this issue here: https://shetline.com/orloj/ Changing positioning of a div inside my foreignObject from absolute to fixed helped some, but the sizing of a canvas inside the div inside the foreignObject is still wrong, and layering is completely ignored -- the canvas contents appear on top of all of the other SVG components, rather than being an intermediate layer, the way the canvas works in Chrome and Firefox. Other suggestions like using a body tag, xmlns="http://www.w3.org/1999/xhtml", or requiredExtensions="http://www.w3.org/1999/xhtml" didn't help either.

kshetline

Comment 42 2022-03-18 18:42:55 PDT

(In reply to kshetline from comment #41) > I'm running into a problem with this issue here: https://shetline.com/orloj/ > > Changing positioning of a div inside my foreignObject from absolute to fixed > helped some, but the sizing of a canvas inside the div inside the > foreignObject is still wrong, and layering is completely ignored -- the > canvas contents appear on top of all of the other SVG components, rather > than being an intermediate layer, the way the canvas works in Chrome and > Firefox. The sample website above will no longer displaying the bug. My not-very-satisfactory workaround for now is to draw to an off-screen canvas, turn the contents of that canvas into a data URL, then assign that URL to an SVG <image>. The performance of this workaround is very slow compared to using a canvas directly. Fortunately fast animation is not vital for this particular website, but where fast animation is needed my workaround would be totally unsatisfactory.

Jakub T. Jankiewicz

Comment 43 2022-03-28 10:40:12 PDT

I have a demo that can confirm this. Safari/Webkit doesn't render HTML inside SVG foreign Object properly: This is my app, SVG laptop with Terminal inside. https://terminal.jcubic.pl/laptop/ The position and scale of the terminal are way off. I use CSS custom properties and calculate pixel density to fix the scaling of the terminal inside the SVG Laptop. More or less it works correctly in Firefox and Chrome (Chrome has some issues, but they were reported).

Simon Fraser (smfr)

Comment 44 2022-03-28 11:00:16 PDT

*** Bug 238461 has been marked as a duplicate of this bug. ***

Simon Fraser (smfr)

Comment 45 2022-03-31 12:15:48 PDT

*** Bug 238499 has been marked as a duplicate of this bug. ***

Simon Fraser (smfr)

Comment 46 2022-06-01 19:37:25 PDT

*** Bug 83189 has been marked as a duplicate of this bug. ***

Simon Fraser (smfr)

Comment 47 2022-06-03 21:14:28 PDT

<rdar://8912810>

Simon Fraser (smfr)

Comment 48 2022-06-17 20:35:29 PDT

*** Bug 93358 has been marked as a duplicate of this bug. ***

Simon Fraser (smfr)

Comment 49 2022-07-18 16:02:44 PDT

*** Bug 103117 has been marked as a duplicate of this bug. ***

Anthony Johnston

Comment 50 2023-08-12 10:15:21 PDT

I am using this to create a dataUrl to share an image of an element in my project. Its an important part of the app, and does not work correctly on Safari iOS https://8bit.antix.co.uk/ completing a bitmap will show the share button

Simon Fraser (smfr)

Comment 51 2023-09-06 13:45:15 PDT

*** Bug 241983 has been marked as a duplicate of this bug. ***

Silvan Mühlemann

Comment 52 2024-01-05 08:41:10 PST

On https://codepen.io/silvanm75/pen/KKbBqzB you can see how to reproduce the issue and how I worked around it. The workaround lead to odd side effects on my project. That's why I would appreciate it if this bug could be fixed.

Simon Fraser (smfr)

Comment 53 2024-04-24 11:33:10 PDT

*** Bug 273173 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.