konvajs / react-konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
https://konvajs.github.io/docs/react/
MIT License
5.8k stars 260 forks source link

Brave Browser breaking click events #769

Closed wanderingme closed 1 year ago

wanderingme commented 1 year ago

I've been developing on brave Browser with react-konva, and my click events on image stopped working with the following update:

Brave Version 1.58.135 Chromium: 117.0.5938.140 (Official Build) (x86_64)

Here's what my implementation looks like:

<Stage width={size.width} height={size.height} >
                                <Layer ref={layerRef2} 
                                        className="excel_div_canvas excel_inner" 
                                        draggable={zoomed} >
                                    <Group ref={groupRef2}>

                                                {canvas2[1].w > 0 && 
                                                <>

                                                    <Image
                                                    key={canvas2[2]}
                                                    ref={imageRef2}
                                                    source={canvas2[0]}

                                                    x={size.width / 2}
                                                    y={size.height / 2}
                                                    offsetX={+canvas2[1].w / 2}
                                                    offsetY={+canvas2[1].h / 2}
                                                    scaleY={canvas2[1].canvasScale}
                                                    scaleX={canvas2[1].canvasScale}

                                                    onClick={(e) => {
                                                    handleCanvasClick(e)
                                                    }}

                                                    />
                                       </Group>
                               </Layer>
          </Stage>

The way I was able to get it back working was to do two things. First. in Brave Shield (Brave > Settings> Shields) the Block fingerprinting setting is set to Standard. I had to disable it to get the click events to work.

Secondly, CSS pseudo-elements :before and :after were stopping the events. This is an easy fix, you only need to add pointer-events: none to the :before and :after elements.

I'm not sure what Brave has changed with this new version of their browser, but if anyone runs into this issue, this is a way around it. I'm going to reach out to Brave and alert them to the issue.

GachiLord commented 1 year ago

Hi, I have used Brave and Firefox to develop my project with konva/react-konva. This issue occurs when I deploy it on remote https server. In my case, it breaks Stage mouse events and Transformer. When I click on a Node, event.target is Stage, when I try to resize or drag Transformer`s nodes nothing happens.

lavrton commented 1 year ago

https://github.com/konvajs/konva/issues/1132#issuecomment-867339732