Is it possible for webkit CSS resize to not function properly when applied to a canvas element that is

Question

Is it possible for webkit CSS resize to not function properly when applied to a canvas element that is

Consider this HTML and CSS code snippet:

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

<div id="box">
  <canvas id="content"></canvas>
</div>

When using the canvas element inside the box, I expected it to be resizable in Firefox, although it isn't in webkit-based browsers like Chrome and Opera. However, replacing the canvas with a div makes it work across all browsers. So my question is: why does using a canvas element prevent the outer div from being resizable in this scenario? And what are possible workarounds?

html css html5-canvas webkit

Answer 1

Answer №1

Upon analysis, it appears that the canvas element is capturing the mouse events, thus obstructing the resizing functionality. A simple solution to this issue would be to add pointer-events:none to the canvas:

#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>

To further demonstrate, try reducing the canvas size slightly to avoid overlapping with the resize widget and notice that the resizing will function correctly:

#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>

You can also manipulate the z-index property as an alternative approach:

#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>

Answer 2

Upon analysis, it appears that the canvas element is capturing the mouse events, thus obstructing the resizing functionality. A simple solution to this issue would be to add pointer-events:none to the canvas:

#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>

To further demonstrate, try reducing the canvas size slightly to avoid overlapping with the resize widget and notice that the resizing will function correctly:

#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>

You can also manipulate the z-index property as an alternative approach:

#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>

Is it possible for webkit CSS resize to not function properly when applied to a canvas element that is

Answer №1

Similar questions

What could be causing the discrepancy in sizes of the columns in my multi-column layout?

Showing JSON information fetched from an AJAX request within an HTML page

What are the steps to recreate the layout of my image using HTML?

Click on the nearest Details element to reveal its content

Adding content to a text field and then moving to the next line

Scroll horizontally in a div with a minimum width while it is contained within a column using Bootstrap

The unequal division of space between two flexed child divs is caused by varying image sizes

HTML5 for Bulk Video Upload

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

The collapsed form-control is adjusting its attributes while resizing

Create a variety of colors with a simple click

Guide on submitting a get form and retrieving the information

Choosing the type attribute of an input tag by using a javascript variable as a condition: What's the best approach?

Dragend event for images does not trigger in webkit when using TinyMCE

As I continue to fill the child DIV element with more text, the shrink wrap is compromised and eventually breaks

What is the method for altering the text color within a disabled input field?

Enable AJAX to dynamically load pages without caching

Having trouble getting the Facebook Like Box to function properly

What will occur if I use an XMLHttpRequest to request a file that is currently being downloaded?

Setting limits to disable or remove specific times from the time picker input box in Angular