Summary
In a web browser Battleship game on an iPhone, I am getting some very ugly highlighting of the squares on the gameboard when the user holds touch to place a ship, and when they tap to fire at the enemy board, and when the AI fires at their board:
It does not appear on desktop browsers, or on Android. I would like to stop this black from appearing on iPhone as well. I'm wondering if anyone knows what this effect is called or how to disable it.
What I've tried
I could not seem to find anything workable in Google searches or Stack Overflow searches. I did try this CSS, but to no avail:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
The gameboard squares are just divs inside a grid. The squares change color by simply having CSS classes added or removed when a shot is fired, or a user is dragging their finger to place a ship, or when the AI attacks the player's board. There is a touchmove handler for placing the ship that uses getElementFromPoint to detect square the player's finger is over when dragging:
function handleTouchMove(e) {
e.preventDefault();
const { x: a, y: b } = touched.dataset;
const lastElement = touched;
let x = e.touches[0].clientX
let y = e.touches[0].clientY
const currentElement = document.elementFromPoint(x, y);
if(currentElement.parentNode.parentNode.id === 'p2') {
return;
}
if(currentElement.classList.contains('square')) {
({ x, y } = currentElement.dataset);
if(currentElement !== lastElement) {
renderShadow([a, b], "clear", p1Board, shipBeingPlaced);
renderShadow([x, y], 'fill', p1Board, shipBeingPlaced);
touched = currentElement;
}
}
}
Thanks