Canvas rendered at wrong height in Flexbox
Reported by
neil.kro...@gmail.com,
Mar 27 2016
|
|||||||||||||||||
Issue description
Chrome Version : 49.0.2623.87
Other browsers tested:
Canary: 51.0.2692.0 canary (64-bit) - Failed randomly
Safari: 9.1 - Failed randomly on a more complicated repro. Could not repro on files attached.
Firefox: 47.0a2 (2016-03-26) - OK
IE: 11 - OK
Edge: 25.10586.0.0 - Renders differently than the other browsers
What steps will reproduce the problem?
(1) Download test.html, test.js, and fdd78...png
(2) Load test.html
What is the expected result?
The image should be ~800 px tall and stretched to fill the viewport horizontally
What happens instead?
The image is only ~150 px tall. If you resize the browser, it fixes itself.
Please provide any additional information below. Attach a screenshot if
possible.
The 'incorrect size.png' image shows the wrong size after load. 'correct size (after resizing borwser).png' shows the correct size that happens if you resize the browser.
This only repros if the script contents are in a separate file. If you put the script inline in the html, it does not repro.
,
Mar 29 2016
Thanks for trying this. I updated my chrome to 49.0.2623.110 and was still able to repro this issue (not 100% of the time though - seems like it repros more easily on slower computers). I can repro it on 2 different Windows computers and a Mac. I disabled all extensions to see if they were affecting it and that did not help. I copied the files to a server. Please try reproing it here: http://www.colorizephoto.com/issue598212/test.html You may need to refresh the page a few times. Selecting 'Disable cache' in Developer Tools -> Network may help too.
,
Mar 29 2016
,
Mar 30 2016
Hm... the incorrect size, at least in my testing, uses a height of 150px, which is the default canvas height: https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLCanvasElement.cpp&q=htmlcanvasel&sq=package:chromium&l=80 Maybe this is another case where we don't clear flexbox's main size cache when the canvas gets laid out again...?
,
Jun 16 2016
,
Jun 29 2016
This is a bug in LayoutHTMLCanvas; we don't mark the canvas as needing layout in this case even though its size changes. Still investigating further...
,
Jun 29 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c43e0bb044f911727bcb340753de1fe03514a2ff commit c43e0bb044f911727bcb340753de1fe03514a2ff Author: cbiesinger <cbiesinger@chromium.org> Date: Wed Jun 29 22:44:06 2016 Canvas objects did not mark themselves for layout when they're a flex item See comment in patch -- when we're a flex item, we (likely) have an override size, so updateLogicalHeight has no effect, so the check if our size has changed has no effect. Skip that if we have an override size. TEST=css3/flexbox/canvas-dynamic-change.html BUG= 607314 , 598212 R=eae@chromium.org,dgrogan@chromium.org Review-Url: https://codereview.chromium.org/2111623002 Cr-Commit-Position: refs/heads/master@{#402973} [add] https://crrev.com/c43e0bb044f911727bcb340753de1fe03514a2ff/third_party/WebKit/LayoutTests/css3/flexbox/canvas-dynamic-change.html [modify] https://crrev.com/c43e0bb044f911727bcb340753de1fe03514a2ff/third_party/WebKit/Source/core/layout/LayoutHTMLCanvas.cpp
,
Jun 29 2016
,
Jul 7 2016
Verified the issue on Win 7,Mac 10.11.5 and Ubuntu 14.04 using 53.0.2785.8 by following the steps mentioned in above comment #3 and its working as expected. |
|||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||
Comment 1 by brajkumar@chromium.org
, Mar 29 2016Components: Blink>Layout>Flexbox
Labels: Needs-Feedback