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

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

我尝试在MAC chrome中运行这个

HTML5

SVG代码（54.0.2840.98（64位））；但是当DIV中的内容溢出或滚动条出现时，DIV中的DIV将变得不可见（或者看起来正在失去位置/从SVG中跳出）。但是，它在MAC Firefox和Windows中的所有浏览器（移动视图除外）中都能完美工作

这是一个关于

视口元数据

外物里面的div

MAC chrome bug

CSS？ 我们怎样才能解决这个问题？。非常感谢你的帮助 我试过的

测试HTML文件

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

头部

<meta content="width=device-width, initial-scale=1" name="viewport" />

---

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

我只是碰巧在Mac chrome（54.0.2840.98（64位））中检查了同样的问题，它在me@Sumit我已经编辑了我的问题，包括一个虚拟html文件，你可以在Mac chrome中打开它吗？它似乎与单位有关，如果你在根svg节点上设置了绝对宽度和高度属性，那么它就可以工作了。另外，如果你删除了CSS中的绝对高度，那么它会工作。。。（这不是奇怪的偏移量，但你仍然无法获得所需的输出）。@kaido感谢它的工作，但当设置为绝对值时，它不会有响应。你认为有什么方法可以让它更具响应性吗？我没有时间深入研究，但听起来确实像是chrome中的一个bug，可能是因为他们是唯一遵循SVG2规范草案的人，而其他人则遵循SVG1.1规范。不确定那里是否有什么变化，所以可能它甚至不是一个bug。。。

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

.list-content {
            height: 280px;
               padding: 0px 25px;
            background: #ffccbc;
               overflow: hidden;
            overflow-y: auto;

     }