Элемент холста, зажатый в IE10

Question

Элемент моего полотна искажается в Internet Explorer 9 & 10, он находится на половине высоты, которая должна быть.
Холст должен быть гибким полем 640x480 с большим красным кружком, а не продолговатым эллипсом. Я надеюсь, что потребуется исправление css spec, но я не понимаю, что такое css или javascript fix.

В IE10 и IE9 это выглядит следующим образом: http://s7.postimg.org/4xtb6vjkr/ie10.png

Код и правильное отображение в Chrome, Firefox, Safari и ie11 можно увидеть здесь:

http://jsbin.com/vutiqatowo/1/edit?html,css,js,output

Это назад требования совместимости для проекта, поэтому желание посетителей не использовать ie10 не является вариантом для этого.

Answer 1

Я вижу заменить height:auto с height:100% решения все более гуглом результатов поиска, но он не работает на страницах, где это является проблемой для меня. Я нашел этот взлом медиа-запросов для -ms-high-contrast, и это работает для искаженного отображения холста. Это не обеспечивает плавное масштабирование, но оно будет правильно отображать элемент холста.

Вот скрипка пример: http://jsfiddle.net/trents_luck/abhbmsd6/

В скрипке например, взломы медиа запросов можно увидеть в нижней части CSS, они читают что-то вроде этого:

@media (-ms-high-contrast: active) and (min-width: 100px), 
     (-ms-high-contrast: none) and (min-width: 100px)