SVG foreignObject内部的Div在最新的chrome版本中失去了它的位置，并且不可见(版本61.0.3163.100[62位])

I tried to run this HTML5 SVG code in latest chrome (61.0.3163.100), and mac chrome(54.0.2840.98 (64-bit)) and android latest version; 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 Firefox and mac firefox and all browsers in Windows (except Mobile views).

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

Is it any issue regarding

有什么问题吗?

viewport metadata? div inside ForeignObject? MAC chrome bug? Latest Chrome version(61.0.3163.100) issue? CSS? How can we solve this?. Your help is much appreciated.

视窗元数据?div ForeignObject里面?MAC chrome错误吗?最新的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;
}

1 个解决方案

#1

This problem is caused by a bug in chrome which became apparent with switch from chrome version 60 to version 61.

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

For updates on this matter, see the entry in the chromium bugtracker at https://bugs.chromium.org/p/chromium/issues/detail?id=771852

有关此问题的更新，请参阅chromium跟踪程序中的条目，其地址为https://bugs.chromium.org/p/chromium/issues/detail?id=771852

#1