I have several divs in my code that have the mask-image and -webkit-mask-image css rule applied to them. These divs are functioning as UI slider elements, so I want keyboard users to be able to tab between them and use the arrow keys to increment or decrement them.
This seems to work fine in Chrome, however I noticed that in Firefox the mask image rule seems to override the default behavior of creating an outline around elements when they come into focus with the tab button.
Here is a simplification of the situation:
.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>I noticed that when switching the <div> to be a <button> element the focus works fine in Firefox, however I'm not sure if it makes sense to use button elements for a slider functionality. Any help is appreciated!
That's probably how FF implemented it, to work around it, just wrap your masked item and put the tabindex on the parent so the mask does not mask the parent <div tabindex=0><div class='masked'> I have a mask image css rule. </div></div> works on my mac FF
– Huangism Aug 15 at 19:21