Currently, I am dealing with an element that functions as a button using a combination of Javascript and CSS. To better illustrate the issue, I will simplify the example by removing unnecessary details. The main problem lies in the fact that when this element is clicked, it gets scaled down. However, the clickable area recognized by Javascript corresponds to its reduced size rather than its original dimensions. This issue seems to be present across all modern desktop browsers.
Let's focus on the crucial components. First, the HTML:
<div id="refresh">more</div>
Next, the CSS:
#refresh {
background-color: #FFF;
cursor: pointer;
transition: all 150ms ease-out;
}
#refresh:active {
transform: scale(0.8);
}
And finally, the Javascript:
var refreshBtn = document.getElementById("refresh");
function newImg() {
// updates an image elsewhere
}
// implementing an event listener based on
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
addEvent(refreshBtn, 'click', newImg);
The challenge I face is that when I click within the scaled-down area of the button (as defined by transform: scale(0.8)), my Javascript triggers the image update. However, if I click outside that region, specifically in the outer 20% of the button, the image does not get updated. While the visual transitions and cursor behavior function correctly, the Javascript fails to recognize this "non-clickable" space as part of the click event.
I have come across some discussions on this topic, but the suggested solutions are not ideal: Non-clickable area on transforming anchor
A similar solution can be found here: increasing clickable area of a button
Here is the CSS snippet I used based on these recommendations:
#refresh:before {
position: absolute;
content: '';
top: -12%;
right: -12%;
left: -12%;
bottom: -12%;
}
By incorporating these changes, I managed to extend the clickable area recognized by Javascript beyond the scaled-down region. However, this approach results in the pointer and CSS hover effects responding even when interacting well outside the original button boundaries. Personally, I find this workaround less than satisfactory. Has anyone encountered a more elegant solution to this dilemma?
Update: For a visual demonstration of the issue described above, refer to this jsfiddle: http://jsfiddle.net/cx9ur44e/4/