I am encountering a strange issue while developing a web application for mobile devices. Everything was going smoothly until I encountered a problematic behavior. The app consists of a Welcome screen with a "Get Started" button in the middle, which leads to a page displaying products in a 2x2 grid format. Each product has a hover effect that blurs the image and displays its name and price. However, after clicking "Get Started," one of the items in the grid is automatically selected (hovered) even though it shouldn't be pre-selected.
Step one: Main welcome screen when the user clicks Get Started button:
https://i.sstatic.net/J7uNr.png
Step two: User has clicked Get Started and goes to the products list with one item marked as selected/clicked due to the hover effect
https://i.sstatic.net/5RwYW.png
Here's the HTML/CSS code for the hover effect on the product names and prices:
<ul className="list-products">
{productsStore.menuProducts.filter(p => p.sectionId == productsStore.activeSectionId).map((product, index) => {
return (
<li key={index} onClick={() => handleOnProductClick(product.id)}>
<button>
<small style={{ backgroundImage: "url(" + getDefaultImage(product.image) + ")" }}></small>
<strong id={product.id}>
<span>
{product.name}
<em>{product.price.toFixed(2)}</em>
</span>
</strong>
</button>
</li>
)
})}
</ul>
.list-products { display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; }
.list-products li { width: 50%; position: relative; padding-bottom: 50%; border-bottom: 1px solid #252525; }
.list-products li:nth-child(odd) { border-right: 1px solid #252525; }
.list-products li button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border: 0; border-radius: 0; }
.list-products li button strong { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 400; background: rgba(0,0,0,.3); opacity: 0; }
.list-products li button:hover strong { opacity: 1; }
.list-products li button strong { display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
.list-products li button span { display: inline-block; font-size: 18px; text-align: left; width: 100% }
.list-products li button span em { font-style: normal; display: block; }
.list-products li button small { background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.list-products li button:hover small { filter: blur(2px); -webkit-filter: blur(2px); }
I forgot to mention that I'm using React. This unusual behavior only occurs on mobile devices, specifically tested on an iPhone with Safari browser. It does not replicate on PC even with mobile view enabled.
My theory is that the hover effect triggers when a user taps on the screen, causing the item to stay hovered until another interaction. Since we clicked "Get Started" near the button location, the browser assumes it is still being hovered. What could be the solution to this issue?