css - 在 Firefox 中使用 mask-image CSS 规则不在 div 上显示焦点轮廓

Question

我的代码中有几个 div 具有 mask-image和 -webkit-mask-image css 规则适用于他们。这些 div 用作 UI slider 元素，因此我希望键盘用户能够在它们之间切换并使用箭头键增加或减少它们。

这在 Chrome 中似乎工作正常，但我注意到在 Firefox 中，掩码图像规则似乎覆盖了当元素通过选项卡按钮聚焦时在元素周围创建轮廓的默认行为。

这里是一个简化的情况:

.masked {
  mask-image: linear-gradient(rgba( 0, 0, 1),transparent);
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
}

<div tabindex=0>
 I'm just a normal div! 
</div>
<div class='masked' tabindex=0>
 I have a mask image css rule. 
</div>
<div tabindex=0>
 I'm just a normal div!  
</div>

我注意到在切换 <div> 时成为<button>元素焦点在 Firefox 中工作正常，但是我不确定将按钮元素用于 slider 功能是否有意义。感谢您的帮助!

Answer 1

这可能是 FF 实现它的方式，要解决它，只需包装您的屏蔽元素并将 tabindex 放在父级上，这样掩码就不会屏蔽父级 < div tabindex=0><div class='masked'> I have a mask image css rule. </div></div>适用于我的 mac FF

- 黄教 8 月 15 日 19:21