掉进transform的坑

马黑黑 · 发表于 2022-12-25 09:29

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

做皇冠3d频谱时，发现页面会闪烁，仔细检查后，是 transform 捣的鬼。

频谱条用了一个伪元素，width: 100%, height: 8px，然后为了让它比频谱条大一些，用了 transform: scale(1.5) 放大它。这在2d环境下不会有任何问题，但在3d环境，页面会闪烁。当频谱条的容器加入 cursor: pointer; 属性，页面上，鼠标指针形状会在手型（pointer）和斜三角形（default）之间来回变换，父元素的点击事件也会扩展到父父元素甚至整个 document。这种现象在 chromium 浏览器（如Chrome、Edge、百分等）出现，Firefox下没有问题（向Firefox致敬）。

或许有朋友会说，width: 100%; 改为 width: 8px; 就能好？不然。伪元素是子元素，在 position: absolute; 的前提下，宽度设为 100% 不可能超越父元素的宽度，我也确实去试了，问题依在。我还给每一个伪元素加 border 以观察其边界，根本就没有外溢。

只能说，这是 chromium 的 bug ：它在处理 transform 时总有一些怪异现象发生，2d和3d环境下都可能会有。Firefox在这方面的表现就比较科学。

其实使用 transform: scale(1.5) 是偷懒行为，懒得再去处理频谱帽的水平居中。现在，bug来了，那也只有老老实实用传统方式制作频谱帽了：

.mline::before {
position: absolute;
content: '';
width: 12px;
height: 12px;
left: calc(50% - 6px);
border-radius: 50%;
background: linear-gradient(135deg,tan,red);
cursor: pointer;
}

这样就爬出深坑了（还是神坑？）。

发现这个bug容易，发现引起这个bug的原因不容易，原因找到后，解决这个bug容易。

特此记录。