SVG foreignObject中的Div失去了在Mac Chrome中的位置

Question

SVG foreignObject中的Div失去了它的位置，在MAC Chrome浏览器和移动视图中不可见。

我试图在MAC chrome中运行这个HTML5 SVG代码（54.0.2840.98（64位））;但是当DIV溢出或滚动条中的内容出现时，DIV内部的DIV变得不可见（或似乎正在失去其位置/跳出SVG）。但是，它在MAC Firefox和Windows中的所有浏览器（Mobile视图除外）中都能很好地工作。

这是一个问题吗？

1. 视口元数据？
2. 在ForeignObject里面的div？
3. MAC chrome bug？
4. CSS？我们怎么解决这个问题？非常感谢您的帮助。

我试过的，

测试HTML文件https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0

在Webkit论坛中发现了类似的错误

https://bugs.webkit.org/show_bug.cgi?id=23113

头

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

     }

Answer 1

我们刚刚遇到了类似的问题，并设法通过在foreignObject上将溢出设置为可见来修复它。