div内部SVG外国对象失去了其位置，在最新的Chrome版本中不可见(版本61.0.3163.100 [62位])

Question

我试图在最新Chrome（61.0.3163.100）和Mac Chrome（54.0.2840.98（64-bit））和Android最新版本中运行此HTML5 SVG代码；但是，当Div溢出或滚动栏中的内容时，内部的DIV变得不可见（或者似乎正在失去其位置/从SVG中跳出）。但是，它在Firefox和Mac Firefox以及Windows中的所有浏览器中都可以正常工作（移动视图除外）。

是关于

的任何问题

视口元数据？ div外国对象？ 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;
}

Answer 1

这个问题是由Chrome中的一个错误引起的，该错误从Chrome版本60转换为61版。

。

有关此事的更新，请参阅https://bugs.chromium.org/p/chromium/issues/issues/detail?id=771852

Answer 2

使用span而不是div将解决此问题。

body{font-family:Arial}
* {box-sizing: border-box;} /*width of span to match with width of foreignobject*/
svg {padding:0;margin:0;border:1px dotted red;}
foreignobject {margin:0; padding:0;width:250px;height:250px}
foreignobject span  {margin:0;padding:0;width:249px;height:249px; background-color:#fffdb6;border:2px solid green;overflow-y:scroll;position:fixed}
/*Click on scroll bar is hidden. If you move over your cursor around 150px towards right side, color of scrollbar changes. Mouse middle scroll is working*/

<svg width="400" height="220">
  <g>
   <rect x="4" y="4" width="390" height="210" stroke="blue" fill="#eeeeee" />
   <foreignobject x="30" y="30">
<span>this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment.this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment.this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment.this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment..this is new com ment. new new new new</span>
	</foreignobject>
    <g>
    </svg>
    </br>
/*Click on scroll bar is hidden. If you move over your cursor around 150px towards right side, color of scrollbar changes. Mouse middle scroll is working*/