4K显示器下Firefox中box-shadow裁剪及过渡卡顿的CSS修复咨询

针对Win10+4K 150%缩放场景下，Firefox中焦点状态的inset阴影裁剪、过渡卡顿问题，以下是几个可行的CSS修复方案：

1. 强制GPU加速修正像素对齐 #

给目标组件添加transform: translateZ(0)，触发GPU加速的同时，让浏览器重新计算元素渲染边界，解决非整数倍缩放时的像素截断问题。同时建议把transition: all改成精准指定过渡属性，减少不必要的渲染开销：

.your-component:focus {
  box-shadow: inset 0 0 0 1px blue;
  transition: box-shadow 0.3s ease;
  transform: translateZ(0);
}

2. 用伪元素替代inset阴影 #

如果阴影裁剪问题依然存在，用伪元素模拟inset阴影效果，绕开Firefox的渲染bug：

.your-component {
  position: relative;
  outline: none; /* 按需移除默认焦点轮廓 */
}
.your-component:focus::after {
  content: "";
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left: 0 */
  border: 1px solid blue;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 不干扰组件交互 */
}
.your-component:focus::after {
  opacity: 1;
}

3. Firefox专属微调规则 #

用Firefox专属的CSS前缀规则，针对1.5x缩放场景微调阴影参数，抵消像素截断问题：

@-moz-document url-prefix() {
  .your-component:focus {
    box-shadow: inset 0 0 0 1.1px blue;
    will-change: box-shadow; /* 提前告知浏览器渲染变化，优化过渡流畅度 */
  }
}

4. 额外优化过渡性能 #

添加以下属性进一步减少过渡卡顿：

.your-component {
  backface-visibility: hidden;
  will-change: box-shadow;
}

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