horizontal bar chart increases row height on resize when maintainAspectRatio is set to false

[ThaJay]

• I have read the guidelines for contributing
• 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/