Div inside SVG foreignObject loses its position in Mac Chrome

Question

The div inside the SVG foreignObject loses its position and is not visible in the MAC Chrome browser and in the mobile view.

I tried to run this HTML5 SVG code in MAC Chrome (54.0.2840.98 (64-bit)); but the DIV inside becomes invisible (or seems to lose its position / jump out of the SVG) when the contents appear in the DIV Overflows or scroll bar. However, it works great on Firefox MAC and all browsers on Windows (except mobile views).

This is a problem regarding

1. viewport metadata?
2. div inside ForeignObject?
3. MAC chrome bug?
4. CSS? How can we solve this? Your help is greatly appreciated.

What i tried

HTML test file https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0

Found a similar error in the 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; } 

Answer 1

We just had a similar problem, and we managed to fix it by setting the overflow to visible in ForeignObject.

Answer 2

Use span instead of div. This is resolved.

 body{font-family:Arial} * {box-sizing: border-box;} /*width of span to match with width of foreignobject*/ svg {padding:0;margin:0;border:1px dotted red;} foreignobject {margin:0; padding:0;width:250px;height:250px} foreignobject span {margin:0;padding:0;width:249px;height:249px; background-color:#fffdb6;border:2px solid green;overflow-y:scroll;position:fixed} /*Click on scroll bar is hidden. If you move over your cursor around 150px towards right side, color of scrollbar changes. Mouse middle scroll is working*/ 

 <svg width="400" height="220"> <g> <rect x="4" y="4" width="390" height="210" stroke="blue" fill="#eeeeee" /> <foreignobject x="30" y="30"> <span>this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment.this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment.this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment.this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment. new new new new</span> </foreignobject> <g> </svg> </br> /*Click on scroll bar is hidden. If you move over your cursor around 150px towards right side, color of scrollbar changes. Mouse middle scroll is working*/