Search code examples
htmlcssreactjsmobilemobile-safari

Hover effect make weird behavior on mobile devices

I have very weird problem. So let try explan you. Im developing web application thats going to be used on mobiles. Everything is going well, but i hit a very nasty problem. The app is simple, we have Welcome screen from where you have just on button called Get Strated (near in the middle of screen), after clicking this button app switch to page with listing products in 2x2 grid. Every product has hover effect which blur the image and show name and price. So i hope everything till now sounds good? The problems ocurs when user clicks Get Started and the page render after that automaticly has the item which is on the same place as button 'hovered' which seems strange behavior because you won't to see any of those items pre-selected.

Step one: main welcome screen when the user clicks Get Started button:

enter image description here

Step two: user has clicked Get Started and goes to products list with one item marked as selected/clicked because of hover effect

enter image description here

Here is the html/css, just an regular hover effect thats add blur and show prodcut name&price:

<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 have forgot to mention that I'm using React. Also this behaviour couldn't be reproduced on PC even with mobile view enabled. It is possible only on mobile devices and I have tested it on iphone with safari browser.

What i think is happening: since we are on mobile device, hover effect triggers when users click somewhere on the screen and till the user click onther place, hover keep staying there and since we clicked Get Started (right side of button), the browser thinks we are hovering there and thats why it show as hovered? But now whats the solution here?

Solution

  • Your guess is exactly right. Hover effects do not work correctly on mobile. When a user clicks on the element it quickly triggers the hover effect before taking them to the next link. Sometimes phones will cache that triggered the hover effect and make it always appear that way. Instead of hover effects, you would only want to use on-click effects for mobile. Maybe one day our phones will support this better.