webkit css resize不能与画布一起用作子级? [英] webkit css resize doesn't work with canvas as child?
问题描述
假设以下html和css代码片段:
Suppose the following html and css code snippet:
#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调整大小?以及我该如何解决呢?
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't. If I replace the inner canvas with a div however, it works there too. So my question is: why does the canvas element in this case prevent the outer div from beeing resizeable? And how can I work around this?
推荐答案
似乎画布正在使用鼠标事件来阻止调整大小。如果您在画布上考虑 pointer-events:none
,它将起作用:
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
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
为了更好地说明,请稍微减小画布的大小以避免与resize小部件重叠,它也可以工作:
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;
}
<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>
这篇关于webkit css resize不能与画布一起用作子级?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!