This has affected our system in a live environment. It also doesn't seem to respect any changes to the view box, and will display in a fixed position that is only viewable when the view box lines up with its position.

We have found a partial work around to be to set the div contained in the foreign object to fixed, but this still does not respect the scaling of the view box.

Deleted: current.PNG 7.7 KB

	current.PNG 7.7 KB View Download

Deleted: Expected.PNG 16.7 KB

	Expected.PNG 16.7 KB View Download

Hi, I was wondering if there was any kind of update as to when this would be fixed? I'm receiving reports from our stakeholders that this is a noticeable issue and affects usability.

 Issue 772292  has been merged into this issue.

 Issue 796908  has been merged into this issue.

The root issue is that a self-painting PaintLayer descendant of <foreignObject> is not
positioned correctly. It has nothing to do with scrolling specifically.

More-reduced example attached. position:relative is the Chrome/WebKit magic to trigger
a PaintLayer.

Even before Chrome 63, the example in this bug was broken on high-DPI screens which
hardware-accelerate scrolling.

Deleted: test.html 518 bytes

test.html 518 bytes View Download

All that is missing is the SVG to local border box transform.

This bug will be fixed cleanly by SPv175, which is launching at the end
of February.

Will try to apply a fix in the mean time.

The same problem affects hit-testing.

 Issue 483497  has been merged into this issue.

 Issue 796487  has been merged into this issue.

 Issue 680024  has been merged into this issue.

Unfortunately, we will have to wait for SPv175. As can be seen from
the dup'ed bugs, this issue has unfortunately been present in one form
or another for a long time (years).

If all goes well, SPv175 will ship at the end of February 2018.

 Issue 534601  has been merged into this issue.

 Issue 116566  has been merged into this issue.

 Issue 800987  has been merged into this issue.

 Issue 801384  has been merged into this issue.

 Issue 640272  has been merged into this issue.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/24db13984135fc72c9dfd67f636f4afcf5ac0775

commit 24db13984135fc72c9dfd67f636f4afcf5ac0775
Author: Xianzhu Wang <wangxianzhu@chromium.org>
Date: Wed Jan 17 22:23:54 2018

[SPv175+] Create OverflowClip for LayoutSVGForeignObject

This applies the overflow clip on the object and its descendants if the
object clips overflow.

This also fixes  crbug.com/771852  for SPv175. The bug fix also changes
behavior of positioned objects under SVG foreignObject (to be correct),
The impact is trivial. See usage data in crbug.com/723076#c8.

Bug:  771643 , 771852 
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I8ecc1c7aaf03c88b1c6a2a1823068e11197695bb
Reviewed-on: https://chromium-review.googlesource.com/862284
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#529919}
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/FlagExpectations/enable-slimming-paint-v175
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/fast/multicol/multicol-svg-expected.html
[add] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/fast/multicol/multicol-svg.html
[delete] https://crrev.com/826434b4506fdbee3b56868fd1f6778dd3e7e21d/third_party/WebKit/LayoutTests/flag-specific/enable-slimming-paint-v175/svg/custom/foreign-object-skew-expected.png
[add] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/flag-specific/enable-slimming-paint-v175/svg/overflow/overflow-on-foreignObject-expected.png
[add] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/flag-specific/enable-slimming-paint-v175/svg/overflow/overflow-on-foreignObject-expected.txt
[delete] https://crrev.com/826434b4506fdbee3b56868fd1f6778dd3e7e21d/third_party/WebKit/LayoutTests/flag-specific/enable-slimming-paint-v175/svg/zoom/page/zoom-foreignObject-expected.png
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/paint/invalidation/svg/paintorder-filtered-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/paint/invalidation/svg/repaint-paintorder-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/svg/inner-svg-change-viewPort-relative-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/svg/text-rescale-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/linux/svg/foreignObject/fO-parent-display-changes-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/linux/svg/hixie/mixed/006-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/linux/svg/hixie/mixed/011-expected.png
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/linux/svg/hixie/mixed/011-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/svg/inner-svg-change-viewPort-relative-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/mac/svg/foreignObject/fO-parent-display-changes-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/mac/svg/hixie/mixed/006-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/mac/svg/hixie/mixed/011-expected.png
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/mac/svg/hixie/mixed/011-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/svg/text-rescale-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/win/svg/foreignObject/fO-parent-display-changes-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/win/svg/hixie/mixed/006-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/win/svg/hixie/mixed/011-expected.png
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/platform/win/svg/hixie/mixed/011-expected.txt
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/svg/foreignObject/fO-parent-display-changes.svg
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/svg/hixie/mixed/006.xml
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/LayoutTests/svg/hixie/mixed/011.xml
[delete] https://crrev.com/826434b4506fdbee3b56868fd1f6778dd3e7e21d/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/foreign-object-repaint-expected.png
[delete] https://crrev.com/826434b4506fdbee3b56868fd1f6778dd3e7e21d/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/zoom-foreignObject-expected.png
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/Source/core/layout/svg/LayoutSVGBlock.cpp
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/Source/core/paint/BlockPainter.cpp
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/Source/core/paint/PaintPropertyTreeBuilder.cpp
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/Source/core/paint/PaintPropertyTreeBuilderTest.cpp
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/Source/core/paint/SVGContainerPainter.cpp
[modify] https://crrev.com/24db13984135fc72c9dfd67f636f4afcf5ac0775/third_party/WebKit/Source/core/paint/SVGForeignObjectPainter.cpp

 Issue 804367  has been merged into this issue.

For those following this bug, please see my update on December 21 (comment 9).
At this point the schedule has slipped a bit and the fix is likely to come closer to the
end of March, but we are indeed working on a general fix as part of a larger code quality
improvement.

Please note that positioned elements under foreignObject has bene buggy for a long time,
and the recent regression only makes that more visible in some cases. The above-mentioned
improvements will increase correctness and usefulness of this feature across the board.

 Issue 794650  has been merged into this issue.

 Issue 811535  has been merged into this issue.

 Issue 815202  has been merged into this issue.

 Issue 695949  has been merged into this issue.

 Issue 633168  has been merged into this issue.

Marking as fixed because SPv175 is now on in M67.

I've just tested this in v67 in Canary. Whilst it appears that the drawing has been fixed (thanks) it seems to have broken the scrolling functionality within foreign objects.

I found the same problem. I hope this doesn't require opening a new bug. It
took three years just to get this far as I reported this problem on Sep 21
2015.

The closer you file bugs to the development, it will more likely be quickly resolved. Do file an issue. You can comment here with the issue number.

Raised  bug 831591  to address the scrolling issue.

Thank you for raising  bug 831591 . The importance of solving this is immense
for web design and development.

 Issue 832209  has been merged into this issue.

 Issue 703095  has been merged into this issue.

 Issue 578682  has been merged into this issue.

 Issue 837981  has been merged into this issue.

 Issue 87072  has been merged into this issue.

 Issue 556695  has been merged into this issue.

A ticket I created was merged into this issue.  (https://bugs.chromium.org/p/chromium/issues/detail?id=832209#c1)  Unfortunately the original sample I provided still doesn't work.  (I'm using chrome version 66.0.3359.181 (Official Build) (64-bit))  Perhaps someone could look at the original sample then re-open this ticket?

Re comment 49:

Please try on Chrome 67 or later, that is where the bug is fixed.

This issue is not closed unless the cure is to ignore it.

View https://svgdesign.guru 

Use Firefox and then use any version of Chrome. Fixed? I don't think so!

The example above - http://output.jsbin.com/guxefi/quiet, is still broken in at least these scenario:

Windows 10
Native Display Resolution - 3840x2160 or 1920x1080
Windows Scaling set to 150% or higher

Its works fine if Scaling is set to 125% or lessor.

Re comment 52: on what version of Chrome are you testing?

@chrishtr@chromium.org

Google Chrome is up to date
Version 67.0.3396.87 (Official Build) (64-bit)

Re comment 52: Hardware Acc On or Off does make a difference.

Re #52: This issue will be fixed as part of crbug.com/471333.

Iframes are not positioning correctly on Chrome Dev (example: https://codepen.io/anon/pen/oMZKxR).
I opened a new issue to track for it: https://bugs.chromium.org/p/chromium/issues/detail?id=866525