[Webkit-unassigned] [Bug 177858] New: Div inside SVG foreignObject loses its position and not visible in latest chrome version (Version 61.0.3163.100) and mac chrome(54.0.2840.98 (64-bit))

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Oct 4 02:16:20 PDT 2017


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

            Bug ID: 177858
           Summary: Div inside SVG foreignObject loses its position and
                    not visible in latest chrome version (Version
                    61.0.3163.100) and mac chrome(54.0.2840.98 (64-bit))
           Product: WebKit
           Version: WebKit Local Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: sunileuamt at gmail.com
                CC: zimmermann at kde.org

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20171004/05d7a493/attachment-0001.html>


More information about the webkit-unassigned mailing list