What are the specific conditions to which "webkit-tap-highlight-color" applies?

0
votes

I found "webkit-tap-highlight-color" is not working depending on conditions when I ran the following code:

<!-- I checked these with Safari on iOS. -->

<!-- onclick + inline-block + short text: OK -->
<div onclick="" class="d-inline-block">AAAAAA</div>

<!-- onclick + block + short text: Not Working -->
<div onclick="" class="d-block">AAAAAA</div>

<!-- block + short text: Not Working -->
<div class="d-inline-block">AAAAAA</div>

<!-- onclick + inline-block + long text: Not Working -->
<div onclick="" class="d-inline-block">AAAAAAAAAA</div>

<style>
  div {
    -webkit-tap-highlight-color: red;
    margin-bottom: 1rem;
  }

  .d-inline-block {
    display: inline-block;
  }

  .d-block {
    display: block;
  }
</style>

Codepen

As the above example, It's not worked if the div element is a long text or display: block.

I don't know the conditions under which this works., although I checked the specifications.

Here is a quote from the specifications:

By default, when the user taps a link or a JavaScript clickable element, Safari on iOS highlights the area in a transparent gray color

So, I have a question:

What are the specific conditions to which "webkit-tap-highlight-color" applies?

javascriptcsswebkit