<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Div inside SVG foreignObject loses its position and not visible in MAC Chrome browser and mobile view."
href="https://bugs.webkit.org/show_bug.cgi?id=165516">165516</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Div inside SVG foreignObject loses its position and not visible in MAC Chrome browser and mobile view.
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Other
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iPhone / iPad
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Critical
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>SVG
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>sinish@amt.in
</td>
</tr>
<tr>
<th>CC</th>
<td>zimmermann@kde.org
</td>
</tr></table>
<p>
<div>
<pre>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 <a href="https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0">https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0</a>
Found a similar bug in webkit forum
<a class="bz_bug_link
bz_status_NEW "
title="NEW - Layer content inside HTML in SVG foreignObject renders in the wrong place"
href="show_bug.cgi?id=23113">https://bugs.webkit.org/show_bug.cgi?id=23113</a>
/////////////-HEAD-///////////
<meta content="width=device-width, initial-scale=1" name="viewport" />
////////////-BODY-////////////
<svg xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" 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="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<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;
}</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>