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中的所有浏览器(Mobile视图除外)中都能很好地工作.

是否有任何问题

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

我尝试了什么

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

在webkit论坛中发现了类似的bug

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 上可见来修复它。