z-индекс <canvas>в IE 9 проблема - PullRequest
Новая
       17

z-индекс <canvas>в IE 9 проблема

10 голосов
/ 16 августа 2011

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

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

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

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

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

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

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

на 

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

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

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

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

1 Ответ

20 голосов
/ 16 августа 2011

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

Если вы установите 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 и устанавливая очень низкое значение альфа, вы даже не заметите, что оно было применено.

...