如何无条件地将 webkit-tap-highlight-color 应用于 div 元素？

Question

The application result changes depending on the conditions as follows.

// I checked these with Safari on iOS.
<span>onclick + inline-block + short text: OK</span><br>
<div onclick="" class="d-inline-block">AAAAAA</div><br>

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

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

<span>onclick + inline-block + long text: Not Working</span><br>

<div onclick="" class="d-inline-block">AAAAAAAAAA</div><be>

Codepen

I don't know if changing the display or the number of characters will change the result, 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 two questions:

1. How to apply webkit-tap-highlight-color to a div element unconditionally?
2. What are the specific conditions to which "webkit-tap-highlight-color" applies?
3. Why is the result changed with the String length?
4. Why is the result changed with the display property?

3, 4 is not required, but I'm glad if you take these questions.

Answer 1

-webkit-tap-highlight-color is not supported with safari. Please visit this for more information about compatibility.

 document.querySelector("#div").addEventListener("click", () => { console.log("div clicked"); });

 * { -webkit-tap-highlight-color: red; }

 <a href="javascript:void(0);">this is link</a> <button>this is button</button> <div id="div">this is div</div>