Rendering bug when inline SVG / flex interact
Reported by
adr...@holovaty.com,
Aug 1 2016
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 Example URL: See minimal test case in attached file Steps to reproduce the problem: 1. View the attached file in Chrome 52. You will see a red box stretch almost all the way across the page. 2. Change the width of your browser window to be wider. Note that the red box does NOT change dimensions. 3. In the markup, delete the inline <svg> (#testsvg), replacing it with text, such as a plus symbol. 4. Now, try resizing the browser width, and you'll see that the red box (correctly) follows the width of the browser. What is the expected behavior? The version with the inline <svg> should behave like the second version. What went wrong? Something about the combination of inline <svg> plus flexbox results in the buggy behavior. It seems like the browser might be optimizing for no redraw, whereas it really *should* be doing a redraw? Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? Yes I believe it worked in the previous Chrome version (51) Does this work in other browsers? Yes Chrome version: 52.0.2743.82 Channel: stable OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 22.0 r0 I noticed this problem in my site soundslice.com (specifically, in the syncpoint editor). I have reduced the markup and CSS as much as I could, in order to make this minimal test case. I've fixed it on Soundslice by removing the "width: 100%" CSS rule from #synceditor. That also fixes the problem in this minimal test case. (No idea why!?) Also, note there's a <canvas> involved here. I don't think this necessarily is relevant to the bug, but I've already spent more than an hour creating this minimal test case, and I can't justify the time to simplify it even further. :-/
,
Aug 3 2016
Huh, that's odd. looking into this...
,
Aug 4 2016
I see a similar issue on one my current projects. On the following site Chrome needs a recalculation of the svg width, otherwise it keeps it to the svg's internal dimensions. Watch for the "jumping" svg icons: http://sport.orf.at/rio2016/stories/2257306/ I attached a screencast of the effect.
,
Aug 4 2016
,
Aug 4 2016
Philipp -- I'm a little unclear on the reproduction steps; do I just hover over the icons, or click them, or what? I can't currently reproduce your screencast by just hovering. What Chrome version are you using?
,
Aug 5 2016
I'm trying to produce a simpler reduced test, but couldn't reproduce the effect in it. A workaround was to use percent units instead of pixels. The SVG in the <img> element is now 30% of the gray box's width and not 48px. Then it looks like Chrome sizes the SVG image after another calulation step and then the size is as intended. If I use pixel units, Chrome infers the size directly from the SVG image source and ignores the <img> dimensions. My version is Version 51.0.2704.103 on Windows 10.
,
Aug 5 2016
Oh, if that's an issue in Chrome 51 your bug is different -- please file a new issue for that: https://crbug.com/new
,
Aug 5 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e929360ccd93a1e98db3b19929a68d1ed4fa4d5d commit e929360ccd93a1e98db3b19929a68d1ed4fa4d5d Author: cbiesinger <cbiesinger@chromium.org> Date: Fri Aug 05 19:17:26 2016 [css-flexbox] Have to use forceChildLayout to force layout The flexbox code was assuming that calling layoutIfNeeded() will do a full layout if needsLayout() is true. However, that is not the case. It is possible for needsLayout() to return true because posChildNeedsLayout is true, in which case calling layout() will not do the full layout that the flexbox code expects. Instead, call forceChildLayout to ensure that layout happens. R=eae@chromium.org,dgrogan@chromium.org CC=szager@chromium.org BUG= 633212 , 629491 Review-Url: https://codereview.chromium.org/2219433002 Cr-Commit-Position: refs/heads/master@{#410135} [add] https://crrev.com/e929360ccd93a1e98db3b19929a68d1ed4fa4d5d/third_party/WebKit/LayoutTests/css3/flexbox/bug633212.html [modify] https://crrev.com/e929360ccd93a1e98db3b19929a68d1ed4fa4d5d/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
,
Aug 5 2016
Will be fixed in tomorrow's Canary and I'll request branch merges in bug 629491
,
Aug 5 2016
Wow, super fast service! :-) Nice work!
,
Aug 5 2016
You're welcome! By the way, as a workaround, you could try min-height: 0; on #synceditor in the meantime.
,
Aug 8 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/92a2a1f5852a882ef9671a8d792313dc670ac899 commit 92a2a1f5852a882ef9671a8d792313dc670ac899 Author: Christian Biesinger <cbiesinger@chromium.org> Date: Mon Aug 08 02:35:26 2016 [css-flexbox] Have to use forceChildLayout to force layout The flexbox code was assuming that calling layoutIfNeeded() will do a full layout if needsLayout() is true. However, that is not the case. It is possible for needsLayout() to return true because posChildNeedsLayout is true, in which case calling layout() will not do the full layout that the flexbox code expects. Instead, call forceChildLayout to ensure that layout happens. R=eae@chromium.org,dgrogan@chromium.org CC=szager@chromium.org BUG= 633212 , 629491 Review-Url: https://codereview.chromium.org/2219433002 Cr-Commit-Position: refs/heads/master@{#410135} (cherry picked from commit e929360ccd93a1e98db3b19929a68d1ed4fa4d5d) Review URL: https://codereview.chromium.org/2224833002 . Cr-Commit-Position: refs/branch-heads/2785@{#519} Cr-Branched-From: 68623971be0cfc492a2cb0427d7f478e7b214c24-refs/heads/master@{#403382} [add] https://crrev.com/92a2a1f5852a882ef9671a8d792313dc670ac899/third_party/WebKit/LayoutTests/css3/flexbox/bug633212.html [modify] https://crrev.com/92a2a1f5852a882ef9671a8d792313dc670ac899/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
,
Aug 9 2016
Retested the above issue on Windows & Ubuntu 14.04 with chrome version - 54.0.2824.0 (Windows) & 54.0.2823.0 (Ubuntu 14.04) with the html file provided in the original bug and in comment#3 & the rectangle area grows / shrinks on browser resize. The Hence marking the same as TE-Verified-54.0.2824.0 & TE-Verified-54.0.2823.0. Attach is the screencast for the same. Thank you!
,
Aug 10 2016
Retested the above issue on All-OS(Windows, Mac & Ubuntu) with chrome version - 53.0.2785.57 with the html file provided in the original bug and in comment#3 & the rectangle area grows / shrinks on browser resize. Hence marking the same as TE-Verified-53.0.2785.57. Thank you! |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by rnimmagadda@chromium.org
, Aug 3 2016Components: Blink>Layout>Flexbox
Labels: -Type-Compat M-54 OS-Linux OS-Windows Type-Bug-Regression
Owner: cbiesin...@chromium.org
Status: Assigned (was: Unconfirmed)