CODEWITHSUNDEEP
htmlmacoscssgoogle-chromesvg
Dibish
Dibish

Reputation: 9293

Div inside SVG foreignObject loses its position in Mac Chrome

Div inside SVG foreignObject loses its position and not visible in MAC Chrome browser and mobile view.

I tried to run this HTML5 SVG code in MAC chrome (54.0.2840.98 (64-bit)); 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 MAC Firefox and all browsers in Windows (except Mobile views).

Is it an issue regarding

  1. viewport metadata?
  2. div inside ForeignObject?
  3. MAC chrome bug?
  4. CSS? How can we solve this?. Your help is much appreciated.

What I tried,

Test HTML file https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0

Found a similar bug in Webkit forum

https://bugs.webkit.org/show_bug.cgi?id=23113

Head 

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

Body

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

     }

Upvotes: 5

Views: 1511

Answers (1)

Anthony
Anthony

Reputation: 21

We've just had a similar issue and managed to fix it by setting the overflow to visible on the foreignObject.

Upvotes: 2

Related Questions