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

Question

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

我试图在MAC chrome （54.0.2840.98（64位））中运行此HTML5 SVG代码； 但是当DIV溢出或滚动条中的内容出现时，内部的DIV变得不可见（或似乎失去了位置/从SVG跳出）。 但是，它可以在MAC Firefox和Windows中的所有浏览器（“移动”视图除外）中完美运行。

这是一个有关的问题吗

1. 视口元数据？
2. div在ForeignObject中？
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可见来设法解决了该问题。