Chrome CSS旋转后可单击区域从其内容移开

tnkciper 于 2022-12-06 发布在 Go

关注(0)|答案(1)|浏览(153)

我有一个特定于Chrome的this collapsible tile问题。

展开按钮是一个div，带有onClick事件处理函数和CSS中的cursor: pointer。折叠时，它旋转90度。

在Firefox（100）和Safari中，按钮的行为与预期一致，即按钮是可单击的，并再次展开磁贴。
在Chrome（105）中，按钮是不可点击的，但它下面的区域是可点击的，如上面的截图所示。

为什么会这样？当div在它应该在的地方，但是它的cursor: pointer和onClick区域在其他地方时，对我来说没有意义。

google-chrome

来源：https://stackoverflow.com/questions/73750049/clickable-area-moves-away-from-its-content-after-css-rotation

1条答案

按热度按时间

qnyhuwrf1#

我通过使用css transform而不是rotate亲自修复了这个问题
在示例中，这里是之前和之后

.expand-button {
    /* other css... */
    /* old css
    transition: rotate 0.5s;
    */
    transition: transform 0.5s;
    &.collapsed {
        /* old css
        rotate: -90deg;
        */
        tranform: rotate(-90deg);
    }
}

我不能完全告诉你为什么这修复它在 chrome ，但它确实😅希望这有帮助。

赞(0）回复(0）举报 2022-12-06

我来回答

Chrome CSS旋转后可单击区域从其内容移开

1条答案

相关问题

热门标签

最新问答