Chrome 57.0.2987.133 (64-bit) breaks d3 charts
Reported by
stripat...@gmail.com,
Apr 4 2017
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Steps to reproduce the problem: 1. Open this link http://codepen.io/anon/pen/QpoQXw 2. Then see output Height:0px in chrome What is the expected behavior? Output should show correct value for height What went wrong? After updating chrome to the latest version 57.0.2987.133, suddenly my charts are broken. The reason for this is that .style("height") always returns 0px. d3.select('#bntextrefmeteo').style("height") This gives the correct results, though: d3.select('#bntextrefmeteo').style("width") D3 version used is: "d3": "4.7.3". Have a look at this Codepen or the following Stack Snippet for a working demo: http://codepen.io/anon/pen/QpoQXw Above codepen in the latest stable release of Chrome i.e. 57.0.2987.133 shows height 0px, but if you try it on any different browser say Safari then it will give the correct value. UPDATE: This is working: d3.select('#bntextrefmeteo').node().getBoundingClientRect().height Did this work before? Yes Chrome version: 57.0.2987.133 Channel: stable OS Version: OS X 10.12.3 Flash Version:
,
Apr 4 2017
,
Apr 4 2017
,
Apr 5 2017
Able to reproduce issue on Mac 10.12.4,Win 10 and Ubuntu 14.04 using stable # 57.0.2987.133, canary # 59.0.3062.0. Bisect info: ============ Good : 57.0.2936.0 Bad : 57.0.2937.0 You are probably looking for a change made after 434884 (known good), but no later than 434885 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/73794caeafd8fb67b345eae7cea31763274beaec..b4ece262ce1150e23a18ad661aa5e1b213f95f51 Review-Url: https://codereview.chromium.org/2531943002 Could you please take a look into this if its related to your change. Added releaseblocker-stable against M58 as its broken in M57 before to the 2987 branch point.Please modify if not appropriate.
,
Apr 5 2017
Returning 0 is wrong. Will fix this before M58 branch. However, using computed style (xxx.style() uses getComnputedStyle) to get width/height of an SVG element is complex and not reliable[1]. The correct value might be 'auto'[2], but for now we return an internal value from inherited LayoutBlock. The better way to the location and size of an SVG element is to use getBBox() (https://www.w3.org/TR/SVG/types.html#__svg__SVGLocatable__getBBox). [1] For now different browsers return different results for getComputedStyle(). Also The value may not be always a number + 'px', but may be 'auto' or a percent value. [2] Firefox returns 'auto'. Chrome also returns 'auto' for most of other SVG elements.
,
Apr 5 2017
Correction: s/before M58 branch/before M58 stable/
,
Apr 5 2017
Just tested with different browsers. Actually only Safari works as expected by d3 charts. FireFox returns 'auto' and IE returns '0px'. I think FireFox is correct. I filed bug 708687 for it. See the bug for details of different results of browsers. I could fix the 0px height issue to let computedStyle(svgText) return the actual height, but that would be still not spec-conforming, and after we fix bug 708687 d3 chart will be broken again. I would suggest d3 chart using getBBox() instead. http://jsbin.com/sekeli is an example. I'm removing RBS and M-58 because the final fix won't let d3 chart work without modification.
,
Apr 6 2017
Fix for bug 708687 has been landed. It changes Chrome behavior to be similar to Firefox. d3 charts needs to be modified to work in Chrome, Firefox and IE. |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by stripat...@gmail.com
, Apr 4 2017