Search code examples
react-konva

react-konva-utils html is exceeding stage canvas

I tried to use react-konva-utils html but it seems the zorder inside the html is not following the parent element.

Here's the sample screenshot below. As you can see the iframe inside the html is exceeding over the konva stage. Compare to the red box which reside inside the Konva Stage. Here's my code :

 <Stage  width={dimensions.width} height={dimensions.height} style={{position :"relative"}}>
  <Layer>
     <Group x={50} y={50} draggable onClick={(e) => itemClick(e)}>
     <Rect x={0} y={0} width={100} height={100} fill="green"  />
      <Html divProps={{ style: { pointerEvents: "none" } }}>
         <div>
            <iframe width="100" height="100"
               src="https://www.youtube.com/embed/tgbNymZ7vqY">
              </iframe>        
              </div>      
      </Html>
    </Group>

      <Transformer ref={transformerRef} /> 
  </Layer>
</Stage>

enter image description here

Solution

  • <Html /> component is not a native citizen of canvas. It is rendered outside of it. Basically, just on top of the canvas with absolute position.

    As the solution, you can try to set overflow: hidden style on a parent container.