Webkit Css Resize Doesn't Work With Canvas As Child?

Suppose the following html and css code snippet: I would expect the div to be resizeable, and in firefox, it is. However in webkit-based browsers such as chrome and opera, it isn'

Solution 1:

it seems that the canvas is taking the mouse event preventing the resize. If you consider pointer-events:none on canvas it will work:

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

<divid="outer"><canvasid="inner"></canvas></div>

To better illustrate, decrease the size of the canvas a little to avoid the overlap with the resize widget and it will also work:

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

<divid="outer"><canvasid="inner"></canvas></div>

You can also play with 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;
}

<divid="outer"><canvasid="inner"></canvas></div>