Blue box when clicking on Javascript element on mobile devices

I created code for some flipping images with HTML, CSS, and some Javascript. The code works perfectly, however I'm facing an aesthetic issue when I'm accessing the live site on mobile devices: When you tap on one of the images, a blue box shortly appears around the image.

Strangely, the issue only appears on the live site (Edit: See picture below for reference) and not on the Codepen Demo (some minor aspects of the css were changed on the live site, but nothing that should influence this behavior). This makes me think it might have something to do with the other CSS/Javascript generated by either Wordpress or WP Bakery.

Is there something that can be done to circumvent the blue box from appearing?

`<div class="image-wrapper">
<div class="flip-image--holder">
<div class="flip-image" id="diana--front" onclick="flipImage(this)">
<button class="flip-button">
<i class="fa-solid fa-repeat" style="color: #99cc00;"></i>
</button>
</div>
<div class="flip-image flip-image--back" id="diana--back" onclick="flipImage(this)">
<button class="flip-button">
<i class="fa-solid fa-repeat" style="color: #99cc00;"></i>
</button>
</div>
</div>
</div>
<script>
function flipImage(button) {
  var flipImageHolder = button.parentElement;
  flipImageHolder.classList.toggle("flipped");
}
</script>`

Honestly, I wouldn't know where to start solving this issue. My best guess is that it's something css-related.

I'm using Chrome and a phone with Android 14.

The issue looks like this:

This is an effect which is prevalent on webkit browsers. To remove the blue overlay you can use -webkit-tap-highlight-color to reset the colour.

Given your HTML structure, this should work:

.image-wrapper {
  -webkit-tap-highlight-color: transparent;
}