Ecommerce Shopify WordPress Discussion

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; }

December 30, 2023

Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.