Элемент Canvas сжат в IE10

Мой элемент холста искажается в Internet Explorer 9 и 10, он наполовину меньше высоты, чем должен быть.
Холст должен представлять собой адаптивный блок размером 640 x 480 с большим красным кругом, а не продолговатый эллипс. Я надеюсь, что потребуется исправление спецификации css, но я не понимаю, каким будет исправление css или javascript.

В ie10 и ie9 это выглядит так: http://s7.postimg.org/4xtb6vjkr/ie10.png

Код и правильное отображение в chrome, firefox, safari и ie11 можно увидеть здесь:

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

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


javascript canvas html css createjs
person Trent Straughan    schedule 27.02.2015    source источник
comment
Ссылка на jsbin должна показывать код, но здесь та же самая настройка с использованием скрипки: jsfiddle.net/#&togetherjs =uzmExRky4H   -  person Trent Straughan    schedule 28.02.2015
comment
заменить высоту:авто; с высотой: 100%;   -  person Ferry Kranenburg    schedule 28.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я вижу решение заменить height:auto на height:100% во всех результатах поиска Google, но оно не работает на тех страницах, где это проблема для меня. Я нашел этот взлом медиа-запроса для -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)
person Trent Straughan    schedule 08.04.2015