изменение размера webkit css не работает с canvas как дочерний элемент?

Question

Предположим, следующий фрагмент кода HTML и CSS:

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
}
#inner {
  width: 100%;
  height: 100%;
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

Я ожидаю, что div будет изменяемого размера, и в Firefox это так. Однако в браузерах на основе webkit, таких как Chrome и Opera, это не так. Однако, если я заменю внутренний холст на div, он тоже будет работать. Поэтому мой вопрос: почему элемент canvas в этом случае предотвращает изменение размера внешнего div? И как я могу обойти это?

Answer 1

кажется, что холст принимает событие мыши, предотвращающее изменение размера. Если вы считаете pointer-events:none на холсте, это будет работать:

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
}
#inner {
  width: 100%;
  height: 100%;
  pointer-events:none
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

Чтобы лучше проиллюстрировать, немного уменьшите размер холста, чтобы избежать наложения с виджетом изменения размера, и это также будет работать:

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
}
#inner {
  width: 100%;
  height: calc(100% - 10px);
  background:red;
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

Вы также можете играть с z-index:

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
  position:relative;
  z-index:0; /* mandatory to create a stacking context and keep the canvas inside */
}
#inner {
  width: 100%;
  height: 100%;
  position:relative;
  z-index:-1;
  background:red;
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>