165516 2016-12-06 22:40:27 -0800 Div inside SVG foreignObject loses its position and not visible 2019-08-02 15:29:37 -0700 1 1 1 Unclassified WebKit SVG Other iPhone / iPad macOS 10.12 RESOLVED DUPLICATE 23113 https://bugs.webkit.org/show_bug.cgi?id=23113 https://bugs.webkit.org/show_bug.cgi?id=149388 P2 Normal --- 1 sinish webkit-unassigned sabouhallawa simon.fraser zalan zimmermann oldest_to_newest 1257196 0 sinish 2016-12-06 22:40:27 -0800 I tried to run this HTML5 SVG code in MAC chrome (54.0.2840.98 (64-bit)); but the DIV inside the become invisible (or seems to be losing its position/jumping out from the SVG) when content in the DIV Overflows or scrollbar comes. However it works perfectly in MAC Firefox and all browsers in Windows (except Mobile views). Is it any issue regarding viewport metadata? div inside ForeignObject? MAC chrome bug? CSS? How can we solve this?. Your help is much appreciated. What I tried Test html file https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0 Found a similar bug in webkit forum https://bugs.webkit.org/show_bug.cgi?id=23113 /////////////-HEAD-/////////// <meta content="width=device-width, initial-scale=1" name="viewport" /> ////////////-BODY-//////////// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1200"> <rect class="cls-a" x="568.13" y="103.99" width="409.76" height="350.53" /> <rect class="cls-b" x="602.86" y="159.55" width="340.31" height="350.28" rx="13.35" ry="13.35"/> <foreignObject class="chat-outer" x="602.86" y="159.55" width="340.31" height="300.28" rx="13.35" ry="13.35"> <div xmlns="http://www.w3.org/1999/xhtml"> <div class="list-wrap" > <div> <div class="list-content"> <div class="list-row"> <p >Hi</p> </div> <div class="list-row"> <p >Hello</p> </div> <div class="list-row"> <p >how are you?</p> </div> </div> </div> </div> </div> </foreignObject> </svg> ////////////////-CSS-////////////// .list-content { height: 280px; padding: 0px 25px; background: #ffccbc; overflow: hidden; overflow-y: auto; } 1257636 1 ap 2016-12-07 23:18:50 -0800 Reproduces in Safari 10 - the rendering is different from Firefox. It's visible though. 1257637 2 296496 ap 2016-12-07 23:19:12 -0800 Created attachment 296496 test case Same test as an attachment. 1257696 3 simon.fraser 2016-12-08 08:07:02 -0800 I think this is about how <foreignObject> needs to act as a rendering root but currently does not. 1257911 4 296575 zalan 2016-12-08 15:09:16 -0800 Created attachment 296575 Test reduction 1257912 5 zalan 2016-12-08 15:11:39 -0800 Broken in Chrome (55.0.2883.75) as well. 1558167 6 sabouhallawa 2019-08-02 15:29:37 -0700 This bug happens because RenderSVGForeignObject is not a rendering root. RenderSVGForeignObject::requiresLayer() currently returns false. *** This bug has been marked as a duplicate of bug 23113 *** 296496 2016-12-07 23:19:12 -0800 2016-12-07 23:19:12 -0800 test case testsvg.html text/html 1844 ap PCFkb2N0eXBlIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQogPGhlYWQ+DQoJPG1ldGEgY2hhcnNl dD0iVVRGLTgiPg0KCTxtZXRhIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1z Y2FsZT0xIiBuYW1lPSJ2aWV3cG9ydCIgLz4NCiAgICA8bWV0YSBuYW1lPSJBdXRob3IiIGNvbnRl bnQ9IiI+DQoJPG1ldGEgbmFtZT0iS2V5d29yZHMiIGNvbnRlbnQ9IiI+DQoJPG1ldGEgbmFtZT0i RGVzY3JpcHRpb24iIGNvbnRlbnQ9IiI+DQogIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+DQogPC9o ZWFkPg0KIDxib2R5Pg0KCQk8c3ZnICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3Zn IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAw IDE2MDAgMTIwMCI+DQoJCQk8ZGVmcz4NCgkJCQk8c3R5bGU+DQoJCQkJCS5jbHMtYiB7DQoJCQkJ CQlmaWxsOiNmZmY7DQoJCQkJCX0NCgkJCQkJLmNscy1hIHsNCgkJCQkJCWZpbGw6Z3JheTsNCgkJ CQkJfQ0KCQkJCQkubGlzdC13cmFwIHsNCgkJCQkJCQkJd2lkdGg6IDEwMCU7DQoJCQkJCQkJCWJh Y2tncm91bmQ6ICNmMWYxZjE7DQoJCQkJCQkJCWhlaWdodDogMTAwJTsNCgkJCQkJDQoJCQkJCX0N CgkJCQkJLmxpc3QtY29udGVudCB7DQoJCQkJCQkJCWhlaWdodDogMjgwcHg7DQoJCQkJCQkJICAg IHBhZGRpbmc6IDBweCAyNXB4Ow0KCQkJCQkJCQliYWNrZ3JvdW5kOiAjZmZjY2JjOw0KCQkJCQkJ CSAgICBvdmVyZmxvdzogaGlkZGVuOw0KCQkJCQkJCQlvdmVyZmxvdy15OiBhdXRvOw0KCQkJCQkN CgkJCQkJfQ0KCQkJCQkubGlzdC1yb3cgICAgew0KCQkJCQkJICAgIGhlaWdodDogMTIwcHg7DQoJ CQkJCQkJYmFja2dyb3VuZDogIzYxNDA1MzsNCgkJCQkJCQltYXJnaW4tYm90dG9tOjEwcHg7DQoJ CQkJCX0NCgkJCQkJLmxpc3Qtcm93IHAgew0KCQkJCQkJY29sb3I6I2ZmZjsNCgkJCQkJCXBhZGRp bmc6MjBweDsNCgkJCQkJfSAgIA0KCQkJCTwvc3R5bGU+CQkJCQ0KCQkJPC9kZWZzPg0KDQoJCQk8 cmVjdCBjbGFzcz0iY2xzLWEiIHg9IjU2OC4xMyIgeT0iMTAzLjk5IiB3aWR0aD0iNDA5Ljc2IiBo ZWlnaHQ9IjM1MC41MyIgIC8+DQoJCQkJPHJlY3QgY2xhc3M9ImNscy1iIiB4PSI2MDIuODYiIHk9 IjE1OS41NSIgd2lkdGg9IjM0MC4zMSIgaGVpZ2h0PSIzNTAuMjgiIHJ4PSIxMy4zNSIgcnk9IjEz LjM1Ii8+DQoJCQkJCTxmb3JlaWduT2JqZWN0IGNsYXNzPSJjaGF0LW91dGVyIiB4PSI2MDIuODYi IHk9IjE1OS41NSIgd2lkdGg9IjM0MC4zMSIgaGVpZ2h0PSIzMDAuMjgiIHJ4PSIxMy4zNSIgcnk9 IjEzLjM1Ij4NCgkJCQkJCTxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwi PgkJCQkJCQ0KCQkJCQkJCQk8ZGl2IGNsYXNzPSJsaXN0LXdyYXAiID4JCQkJCQkJCQ0KCQkJCQkJ CQkJPGRpdj4NCgkJCQkJCQkJCQk8ZGl2IGNsYXNzPSJsaXN0LWNvbnRlbnQiPg0KCQkJCQkJCQkJ CQk8ZGl2IGNsYXNzPSJsaXN0LXJvdyI+DQoJCQkJCQkJCQkJCQk8cCAgPkhpPC9wPg0KCQkJCQkJ CQkJCQk8L2Rpdj4NCgkJCQkJCQkJCQkJPGRpdiBjbGFzcz0ibGlzdC1yb3ciPg0KCQkJCQkJCQkJ CQkJPHAgID5IZWxsbzwvcD4NCgkJCQkJCQkJCQkJPC9kaXY+DQoJCQkJCQkJCQkJCTxkaXYgY2xh c3M9Imxpc3Qtcm93Ij4NCgkJCQkJCQkJCQkJCTxwID5ob3cgYXJlIHlvdT88L3A+DQoJCQkJCQkJ CQkJCTwvZGl2Pg0KCQkJCQkJCQkJCTwvZGl2Pg0KCQkJCQkJCQkJPC9kaXY+DQoJCQkJCQkJCTwv ZGl2Pg0KCQkJCQkJPC9kaXY+DQoJCQkJCTwvZm9yZWlnbk9iamVjdD4JCQkNCgkJPC9zdmc+DQog PC9ib2R5Pg0KPC9odG1sPg0KDQo= 296575 2016-12-08 15:09:16 -0800 2016-12-08 15:09:16 -0800 Test reduction bug165516.html text/html 471 zalan PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw Oi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDgwMCAxNjAwIj4KICA8ZGVm cz4KICAgIDxzdHlsZT4KICAgICAgZm9yZWlnbk9iamVjdCB7CiAgICAgICAgYm9yZGVyOiA1cHgg c29saWQgYmx1ZTsKICAgICAgfQoKICAgICAgZGl2IHsKICAgICAgICB0cmFuc2Zvcm06IHRyYW5z bGF0ZVgoMCk7CiAgICAgICAgYmFja2dyb3VuZDogZ3JlZW47CiAgICAgIH0KCiAgICA8L3N0eWxl PgkJCQkKICA8L2RlZnM+CiAgPGZvcmVpZ25PYmplY3QgY2xhc3M9ImNoYXQtb3V0ZXIiIHg9IjMw MCIgeT0iMCIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiPgogICAgPGRpdj5QQVNTIGlmIHRoaXMg Ym94IGlzIGFsaWduZWQgd2l0aCB0aGUgYmx1ZSBib3JkZXIuPC9kaXY+CiAgPC9mb3JlaWduT2Jq ZWN0PgkJCQo8L3N2Zz4K