SVG foreignObject 中的 Div 失去其位置，在最新的 chrome 版本中不可见（版本 61.0.3163.100 [62 位]）答案

【问题标题】：Div inside SVG foreignObject loses its position and not visible in latest chrome version (Version 61.0.3163.100 [ 62 bit ] )SVG foreignObject 中的 Div 失去其位置，在最新的 chrome 版本中不可见（版本 61.0.3163.100 [62 位]）
【发布时间】：2018-03-15 15:00:13
【问题描述】：

我尝试在最新的 chrome (61.0.3163.100)、mac chrome(54.0.2840.98 (64-bit)) 和 android 最新版本中运行这个 HTML5 SVG 代码；但是当 DIV 溢出或滚动条中的内容出现时，内部的 DIV 变得不可见（或似乎正在失去其位置/从 SVG 中跳出）。然而，它在 Firefox 和 mac firefox 以及 Windows 中的所有浏览器（移动视图除外）中都能完美运行。

有什么问题吗

视口元数据？ ForeignObject 中的 div？ MAC 铬错误？最新的 Chrome 版本（61.0.3163.100）问题？ CSS？我们怎样才能解决这个问题？非常感谢您的帮助。

<meta content="width=device-width, initial-scale=1" name="viewport" />



 <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;
}

【问题讨论】：

标签： javascript css angularjs svg

【解决方案1】：

此问题是由 chrome 中的一个错误引起的，该错误在从 chrome 版本 60 切换到版本 61 时变得明显。

有关此问题的更新，请参阅位于 https://bugs.chromium.org/p/chromium/issues/detail?id=771852 的铬错误跟踪器中的条目

【讨论】：

【解决方案2】：

使用span 代替div 将解决此问题。

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*/

【讨论】：