New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 772292 link

Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 771852
Owner: ----
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

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

Reported by sunileu...@gmail.com, Oct 6 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce the problem:
1. Is it any issue regarding  viewport metadata? div inside ForeignObject? 
2. MAC chrome bug? 
3.Latest Chrome version(61.0.3163.100) issue? 
4.CSS? How can we solve this?. 

What is the expected behavior?

What went wrong?
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).  

Did this work before? N/A 

Chrome version: 61.0.3163.100  Channel: stable
OS Version: 10.0
Flash Version:
 
Sample code: 

<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;
}
 Issue 772287  has been merged into this issue.
Cc: susanjuniab@chromium.org
Labels: Needs-Feedback Needs-Triage-M61
sunileuamt@ Thanks for the issue.

Unable to reproduce the issue on Mac OS 10.12.6, Windows 7 using the latest Canary  63.0.3236.0 and latest Stable 61.0.3163.100  with the below steps.

1. Launched Chrome and opened the html file which has the above code.
2. Can observe that the DIV is rendered correctly and no issues are observed.
The same behavior is seen On Firefox as well.

Please find the attached screen shots on Firefox and Chrome and let us know if anything is missing from our end.

Request you to please retry the issue on a new Chrome profile without any flags/extensions and update the thread if there is any issue.

Thanks...
772292_Chrome.png
14.8 KB View Download
772292_Firefox.png
19.4 KB View Download
@susanjuniab@chromium.org Thanks for the reply.

The issue still exists for us in latest chrome (61.0.3163.100), and mac chrome(54.0.2840.98 (64-bit)) and android latest version;

Please check the attached HTML file and the screenshots in chrome and Edge

svgissue.html
1.8 KB View Download
chrome.jpg
88.5 KB View Download
edge.jpg
95.8 KB View Download

Comment 5 by woxxom@gmail.com, Nov 8 2017

61 is not the latest Chrome for Windows.
62 is the latest.
Same result for Version 62.0.3202.89 (Official Build) (64-bit) .
Components: -UI Blink>SVG

Comment 8 by woxxom@gmail.com, Dec 16 2017

Bisect info: 482440 (good) - 482453 (bad)
https://chromium.googlesource.com/chromium/src/+log/d654734a..4f202cca?pretty=fuller
Suspecting r482441 = a348403ddc19ee7bb93c38e6dda500c54d12e9d6 = https://crrev.com/c/547366 by chrishtr@chromium.org
"Notify PaintLayer if ScrollsOverflow changed."
Landed in 61.0.3142.0

Looks like a duplicate of  issue 771852 .
Mergedinto: 771852
Status: Duplicate (was: Unconfirmed)
Yep, almost certainly a duplicate.

Sign in to add a comment