Question posted in 
I found what seems to be a bug, unless I’m missing something. And I was wondering if anyone here found something similar happening to them and what the fix could be. Also I really need to rule out that there’s something I’m not seeing here and that it effectively is a bug. I had this happen on a project I was working on and I got to the point of creating a React project completely from scratch just to see if I could replicate it and of course I could. Then went on an made a simple .html file with a div and the error happened as well. I’m losing my mind here.
`
</head>
<body>
<div style="width: 300px; height: 300px; border: 1px solid green" onclick="alert('hi')"></div>
</body>
`
Alert pops up when clicking slightly outside of its container 🙁
I’m expecting alert only to pop up only when clicking on the area inside the green borders.
2
Answers
check the the app.css, if u called the component over the app.js the code should get some extra css or cross functioning css
I’m assuming when you say mobile resolution you tested it through browser dev tools’ "device emulatoion" or an actual mobile phone.
When you tap on a touch screen, the region that is activated is not exactly a single point/pixel but a small area around the point where your finger makes contact with the screen. This area accounts for the fact that humans have fat and not so precise fingers.
This is even emulated in the browser dev tools as seen in the image below, here the event is triggered when I tap in the exact position as the image.
If this is the "outside" that you are refering to it is expected and is a feature of accessibility
Another interesting thing about this is when there are two intersecting boxes (like in the image) and you tap on the border, the box with the grater touch area is triggred.