Bug 165516 - Div inside SVG foreignObject loses its position and not visible
Summary: Div inside SVG foreignObject loses its position and not visible
Status: RESOLVED DUPLICATE of bug 23113
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Other
Hardware: iPhone / iPad macOS 10.12
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-12-06 22:40 PST by sinish
Modified: 2019-08-02 15:29 PDT (History)
4 users (show)

See Also:

Attachments
test case (1.80 KB, text/html)
2016-12-07 23:19 PST, Alexey Proskuryakov 		no flags Details
Test reduction (471 bytes, text/html)
2016-12-08 15:09 PST, zalan 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description sinish 2016-12-06 22:40:27 PST 
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 any issue regarding

viewport metadata?
div inside ForeignObject?
MAC chrome bug?
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;
}
Comment 1 Alexey Proskuryakov 2016-12-07 23:18:50 PST 
Reproduces in Safari 10 - the rendering is different from Firefox. It's visible though.
Comment 2 Alexey Proskuryakov 2016-12-07 23:19:12 PST 
Created attachment 296496 [details]
test case

Same test as an attachment.
Comment 3 Simon Fraser (smfr) 2016-12-08 08:07:02 PST 
I think this is about how <foreignObject> needs to act as a rendering root but currently does not.
Comment 4 zalan 2016-12-08 15:09:16 PST 
Created attachment 296575 [details]
Test reduction
Comment 5 zalan 2016-12-08 15:11:39 PST 
Broken in Chrome (55.0.2883.75) as well.
Comment 6 Said Abou-Hallawa 2019-08-02 15:29:37 PDT 
This bug happens because RenderSVGForeignObject is not a rendering root.
RenderSVGForeignObject::requiresLayer() currently returns false.

*** This bug has been marked as a duplicate of bug 23113 ***