Chart.js: horizontal bar chart increases row height on resize when maintainAspectRatio is set to false

[ThaJay]

• [x] I have read the guidelines for contributing
• [x] I have included an example of my issue on a website such as JS Bin, JS Fiddle, or Codepen.

Steps to reproduce:

• new Chart(ctx, {type: 'horizontalBar', data})
• maintainAspectRatio: false
• resize your window

https://jsfiddle.net/pzx1LtqL/3/

[nealoke]

Same issue with a line chart I am making :/

[nealoke]

@ThaJay if you want a workaround for now, set a max height on the container of the chart which limits how far the chart stretches out in height. To avoid inconsistency I also set a height and max height of the same amount (keeping it constant across all screen heights)

[etimberg]

The good news is that I now know what causes this. The bad news is that I don't yet know the fully cross-browser way to fix it so I need to do some testing on my end. The gist of it is described in http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below-canvas-video-audio-elements-in-html5

In the fiddle i added some CSS to make the canvas display: block and the problem went away

[etimberg]

Ok, the summary of my research is in the table below. 'Yes' indicates that the browser CSS display combination includes an extra 4 px at the bottom.

| CSS Display | Chrome | Firefox | IE11 | Edge | Safari |
| --- | --- | --- | --- | --- | --- |
| inline | Yes | Yes | Yes | Yes | Yes |
| block | | | | | |
| list-item | | | | | |
| inline-list-item | Yes | Yes | | Yes | Yes |
| inline-block | Yes | Yes | Yes | Yes | Yes |
| inline-table | Yes | Yes | | Yes | Yes |
| table | | | | | |
| table-cell | | Yes | | | |
| table-column | | Yes | | | |
| table-column-group | | Yes | | | |
| table-footer-group | | Yes | | | |
| table-header-group | | Yes | | | |
| table-row | | Yes | | | |
| table-row-group | | Yes | | | |
| flex | | | | | |
| inline-flex | Yes | Yes | | Yes | Yes |
| grid | Yes | Yes | | Yes | Yes |
| inline-grid | Yes | Yes | | Yes | Yes |
| run-in | Yes | Yes | | Yes | Yes |
| ruby | Yes | Yes | | Yes | Yes |
| ruby-base | Yes | Yes | | Yes | Yes |
| ruby-text | Yes | Yes | | Yes | Yes |
| ruby-base-container | Yes | Yes | | Yes | Yes |
| ruby-text-container | Yes | Yes | | Yes | Yes |
| contents | Yes | Yes | | Yes | Yes |

[etimberg]

Fixed in 2.1.6 we default to a block style if one is not set on the canvas. See https://jsfiddle.net/pxzzo24p/1/

[Jiia]

I ran into this issue on 2.3.0. It occurred because the container had other items in it besides from the canvas. By putting the canvas inside its own container and setting container position:relative everything works beautifully. Example how to break it: https://jsfiddle.net/pxzzo24p/14/