Open
Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
Sentry Browser Loader
SDK Version
8.x
Framework Version
No response
Link to Sentry event
No response
Reproduction Example/SDK Setup
CodePen link: https://codepen.io/FlowSavvy/pen/ZYzYjvj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick tap demo</title>
<!-- Replays are enabled on this loader script. Issue occurs. -->
<script src="https://js.sentry-cdn.com/47dd0666dc7a9145383bc74f7fed0fb7.min.js" crossorigin="anonymous"></script>
<!-- Replays are disabled on this loader script. Issue does not occur. Uncomment this script and comment out the other script above to test. -->
<!-- <script src="https://js.sentry-cdn.com/c2dc41a13a628a4c8da848317cbfe939.min.js" crossorigin="anonymous"></script> -->
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
.item {
padding: 15px;
background: #e8e8e8;
cursor: pointer;
border-radius: 4px;
margin-bottom: 10px;
}
.item.selected {
background-color: #9ecaff;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; padding: 20px; max-width: 300px;">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
<script>
document.querySelectorAll('.item').forEach(item => {
item.addEventListener('click', (e) => {
e.target.classList.toggle('selected');
const now = new Date();
e.target.textContent = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}.${now.getMilliseconds()}`;
});
});
</script>
</body>
</html>
Steps to Reproduce
- Create a Sentry JavaScript project
- Ensure Session Replays are turned on in the loader script configuration page in the Sentry dashboard.
- The issue does not occur if Replays are turned off, so it seems like the Replay feature is interfering with the click events
- Copy the loader script into any project that has multiple elements you can select in quick succession, like a to-do list with multi-select. The CodePen example is a super basic example of this.
- Open your project or the CodePen demo on any iOS browser.
- The issue does not occur on Android/Windows. This makes me think it's not a device performance issue, since the Android I tested on is an extremely slow, $30 phone, but it doesn't have any issues with the demo file.
- iOS device/version doesn't seem to matter. I'm seeing it on both iPhone 13 mini running iOS 18.1.1, and an iPad mini 4 running iOS 14.3
- Tap the items in the list quickly in any order. For example, tap the first item, then the second in quick succession.
- The issue only occurs when tapping the touch screen. If you connect a bluetooth mouse to the same iOS device and click the items in quick succession, there is no issue.
- The issue does not occur when the same element is tapped in quick succession. It's only when they are different elements in the DOM
Example video: https://flowsavvy-public.s3.us-east-1.amazonaws.com/quick+tap.mov
Expected Result
List items can be selected/deselected in quick succession with no delay and no click events missed.
Actual Result
On iOS browsers, click events after the first click are fired 400-500 milliseconds after tapping the elements, and if you tap more than 2 elements in quick succession, the 2nd click event is completely missed.
See the example video included in the "steps to reproduce" section for a demonstration.
Metadata
Assignees
Type
Projects
Status
Waiting for: Product Owner
Activity