CSS按钮加载动画结合disabled状态出现双重透明度异常

这个双重透明度效果是典型的浏览器合成层渲染bug，由三个条件同时满足触发：

• 你给:disabled状态的按钮设置了opacity: 0.3，当元素opacity值小于1时，浏览器会为其生成独立的合成层与层叠上下文。
• 按钮本身默认是position: static定位，你没有手动修改它的定位属性。
• 你给.loading状态下的.icon设置了position: absolute，但没有将按钮设为该图标的定位锚点。

在Chromium/Webkit内核浏览器中，只要同时满足「opacity<1的元素为static定位」、「元素内部存在绝对定位子元素」两个条件，就会出现绝对定位子元素被重复合成渲染的问题，视觉上表现为子元素透明度叠加、发虚，和预期效果不符。

另外你当前的代码还存在一个隐藏问题：给.icon设置绝对定位后没有添加居中偏移规则，哪怕修复了透明度问题，加载图标也不会稳定显示在按钮正中间，且旋转动画使用的transform属性会和定位用的transform冲突。

只需要两步调整即可彻底解决问题：

1. 给按钮基础样式添加position: relative，让内部绝对定位的图标以按钮为定位锚点，破坏bug触发条件，双重透明度问题会直接消失。
2. 调整图标定位与动画的逻辑，避免transform属性冲突，保证加载图标居中旋转：
   • 给.icon设置top: 50%、left: 50%和transform: translate(-50%, -50%)实现居中
   • 把旋转动画从.icon本身转移到:before伪元素上，避免动画的transform覆盖定位属性；如果不想调整动画挂载位置，也可以直接在关键帧里合并平移和旋转规则。

修复后的完整CSS代码如下：

@keyframes theAnim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

button {
  background: rgb(30, 3, 56);
  color: white;
  padding: 20px;
  margin-right: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 核心修复：添加非static定位，解决渲染bug */

  &:disabled {
    opacity: 0.3;
  }

  &.loading {
    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* 图标居中定位 */

      &:before {
        content: "#";
        animation: theAnim 2s infinite linear; /* 动画移到伪元素，避免transform冲突 */
      }
    }

    .text {
      visibility: hidden;
    }
  }
}

如果选择在关键帧中合并transform规则，可以保留动画在.icon上的写法，调整后的关键帧和.loading样式如下：

@keyframes theAnim {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(359deg);
  }
}

/* 对应.loading下的.icon写法 */
.loading .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: theAnim 2s infinite linear;
  &:before {
    content: "#";
  }
}

内容的提问来源于stack exchange，提问作者Mantalo