掉进transform的坑
做皇冠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容易。
特此记录。
好好的一个扩大一点的心愿，被 chromium 整成了蝴蝶效应{:4_173:} 能爬出来的坑都不叫坑，在黑黑面前，没有坑敢傲然存在{:4_173:} 红影 发表于 2022-12-25 10:23
能爬出来的坑都不叫坑，在黑黑面前，没有坑敢傲然存在
坑多着呢 红影 发表于 2022-12-25 10:22
好好的一个扩大一点的心愿，被 chromium 整成了蝴蝶效应
{:4_181:} 俺是睁眼瞎，都 不知道啥坑{:4_189:} 樵歌 发表于 2022-12-25 12:47
俺是睁眼瞎，都 不知道啥坑
所有的坑都一样：下去了要爬起来 马黑黑 发表于 2022-12-25 10:37
坑多着呢
看黑黑在坑上腾挪闪躲，展示高级武功{:4_204:} 红影 发表于 2022-12-25 18:47
看黑黑在坑上腾挪闪躲，展示高级武功
就是太肥，弹跳能力差一点 马黑黑 发表于 2022-12-25 19:05
就是太肥，弹跳能力差一点
哈哈，肥人{:4_173:} 坑在哪儿？{:4_203:} 千羽 发表于 2022-12-25 19:35
坑在哪儿？
脚下 千羽 发表于 2022-12-25 19:33
哈哈，肥人
肥肥更健康 马黑黑 发表于 2022-12-25 19:48
脚下
俺是一笨人，看不见……{:4_173:} 千羽 发表于 2022-12-25 19:49
俺是一笨人，看不见……
那就会扑通扑通掉坑里 马黑黑 发表于 2022-12-25 19:50
那就会扑通扑通掉坑里
你那坑就是你裁剪的新衣……，俺不怕{:4_173:} 千羽 发表于 2022-12-25 19:52
你那坑就是你裁剪的新衣……，俺不怕
{:4_203:} 马黑黑 发表于 2022-12-25 20:07
哈哈，没懂到就太好了{:4_199:} 千羽 发表于 2022-12-25 20:14
哈哈，没懂到就太好了
也是 马黑黑 发表于 2022-12-25 19:05
就是太肥，弹跳能力差一点
好像抽烟的人都胖不起来的吧。
页:
[1]
2