Div inside SVG foreignObject loses its position and not visible in latest chrome version (Version 61.0.3163.100 [ 62 bit ] )

user_4688232 0
Viewed 1499

I tried to run this HTML5 SVG code in latest chrome (61.0.3163.100), and mac chrome(54.0.2840.98 (64-bit)) and android latest version; but the DIV inside the become invisible (or seems to be losing its position/jumping out from the SVG) when content in the DIV Overflows or scrollbar comes. However it works perfectly in Firefox and mac firefox and all browsers in Windows (except Mobile views).

Is it any issue regarding

viewport metadata? div inside ForeignObject? MAC chrome bug? Latest Chrome version(61.0.3163.100) issue? CSS? How can we solve this?. Your help is much appreciated.

<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;
}
angularjs svg css javascript
2 Answers
user_16982460

Using span instead of div will resolve this issue.

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

user_115385800
Related