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

我尝试在最新的chrome（61.0.3163.100）、mac chrome（54.0.2840.98（64位））和android最新版本中运行HTML5 SVG代码；但是当DIV中的内容溢出或滚动条出现时，DIV中的DIV将变得不可见（或者看起来正在失去位置/从SVG中跳出）。不过，它在Firefox和mac Firefox以及Windows中的所有浏览器（移动视图除外）中都能完美工作

有什么问题吗

视口元数据？ 外物里面的div？ MAC chrome bug？ 最新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;
}

你好

你好

你好吗

////////////////-CSS-//////////////
.列出内容{
高度：280px；
填充：0px 25px；
背景：#ffccbc；
溢出：隐藏；
溢出y：自动；
}

这个问题是由chrome中的一个bug引起的，从chrome版本60切换到chrome版本61后，这个bug变得很明显

---

有关此问题的更新，请参阅chromium bugtracker中的条目，位于，使用

span

而不是

div

将解决此问题

body{font-family:Arial}
*{框大小：边框框；}/*跨度的宽度与foreignobject的宽度匹配*/
svg{填充：0；边距：0；边框：1px点红色；}
foreignobject{margin:0；padding:0；宽度：250px；高度：250px}
foreignobject span{margin:0；padding:0；宽度：249px；高度：249px；背景色：#fffdb6；边框：2px纯绿色；溢出-y:滚动；位置：固定}
/*点击滚动条是隐藏的。若将光标移到150像素左右的右侧，滚动条的颜色会发生变化。鼠标中滚动正在工作*/

这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件这是新组件。新新


/*点击滚动条是隐藏的。若将光标移到150像素左右的右侧，滚动条的颜色会发生变化。鼠标中滚动正在工作*/