Z-index <canvas> в IE 9 проблема

Я испытываю странную проблему с z-индексом <canvas>; не рендеринг как правый слой в IE9. Взгляните на этот jsfiddle:

http://jsfiddle.net/xacto/MTUHX/

Вот как это должно работать:

  • Красная рамка должна быть гиперссылкой и быть верхним слоем.
  • Голубой <canvas> должен следующий слой.
  • Коробка с зеленым фоном должна быть внизу.

Это работает правильно в Chrome, Firefox и даже в IE8. Однако в IE9 голубой <canvas> - это верхний слой, а гиперссылка с красным контуром больше не доступна для клика, за исключением маленькой области внизу, где она не накладывается на голубой цвет <canvas>.

Здесь еще одна вещь: если вы измените <canvas> на <div>, то измените строку:

var can = $('<canvas></canvas>').css({...

к

var can = $('<div></div>').css({...

Он будет работать и в IE9. Это заставляет меня думать, что это проблема, связанная с <canvas>, а не только проблема z-index.

Я пробовал много комбинаций z-индексов на основе предложений, найденных в Интернете, но ничего не работает. Если у кого-то есть ответ на этот вопрос, мы будем очень благодарны.

P.S. Некоторые могут спросить, почему <canvas> добавляется через JavaScript и почему он добавляется в качестве первого элемента <body>. Не вдаваясь в подробности, стороннее приложение, использующее <canvas>, требует, чтобы он был добавлен таким образом.

ОТВЕТЫ

Ответ 1

Не спрашивайте меня, почему, но почему-то проблема возникает из-за того, что в ваших блоках нет фона.

Если вы установите background-color для #box2 или #box3, ссылка станет доступной. Пример в реальном времени: http://jsfiddle.net/tw16/HFKMC/

Итак, вы можете использовать:

.box2{
    z-index: 10;
    position: relative;
    min-width: 200px;
    min-height: 200px;
    background-color: rgba(255,255,255,0.01); /* this is basically transparent */
}

Используя rgba и установив очень низкое значение альфа-диапазона, вы даже не заметите, что оно было применено.