按钮不会对 Chrome 中的用户操作做出反应

Question

I am playing with CSS and found one bug which appears in Chrome(Version 104.0.5112.81). In Firefox(103.0) code works well. I have prepared test application https://codesandbox.io/s/card-click-ru5gbu . In the test app you may see, that "FRONT btn" does not react on user actions. The card behaves like there is no a button. I am interesting, is there possible solution for such bug?

Answer 1

Disclaimer, I am not entirely sure why they behave differently in different browser, but I did get down to what I think is the problem, and here are my findings.

The issue is the way you position your doms, I can see you are using position absolute, although you are transforming the position, and hiding the backface (I am guessing different browsers deal with this property in a different ways, which is why the behavior is different), but that doesn't mean the dom doesn't exist, basically every click you think you are clicking on the front button is actually a click on face back div, hence the flip. If I was to fix this, I would add pointer-events none to the back div when it is flipped, just to ensure that events are behaving as you would expect.

so here

the html

<div class="face back"  [class.flipped]="flippedState === 'flipped'"(click)="cardClicked(); $event.stopPropagation();">

the css

.flipped{ 
  pointer-events: none;
}