Internet Explorer 10 баг с относительной высотой холста

Мне нужно сделать плитку из холстов (canvas), которые имеют максимальную ширину 320px, а высота рассчитывается автоматически. Все браузеры справляются с этим нормально (даже Edge), но Internet Explorer 10 почему то использует абсолютную высоту, а не относительную. Пример: https://jsfiddle.net/gok0j65n/

<div class="table-list">
  <div class="table-item">
    <div>Canvas #1</div>
    <canvas width="800" height="600"></canvas>
  </div>
  <div class="table-item">
    <div>Canvas #2</div>
    <canvas width="800" height="600"></canvas>
  </div>
</div>
.table-list {
    text-align: center;
}
.table-item {
    display: inline-block;
    max-width: 320px;
    background: yellow;
}
canvas {
    display: block;
    margin: 0 auto;
    width: 100%;
}
canvas {
    background: url('http://cdn.htpcbeginner.com/images/2016/10/Discovery-Channel-Youtube-featured.jpg') no-repeat 50% 50%;
    background-size: 92.5% 66.666666666666666%;
}

Вот так результат выглядит в Internet Explorer 10:

Можно ли как то решить эту проблему с помощью CSS?