Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replay feature appears to be interfering with iOS browser/webview click events #14534

Open
3 tasks done
jacobbarnes opened this issue Nov 29, 2024 · 0 comments
Open
3 tasks done

Replay feature appears to be interfering with iOS browser/webview click events #14534

jacobbarnes opened this issue Nov 29, 2024 · 0 comments
Labels
Package-Meta: Loader Waiting for: Product Owner

Comments

@jacobbarnes
Copy link

Is there an existing issue for this?

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

  1. Create a Sentry JavaScript project
  2. 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
  3. 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.
  4. 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
  5. 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package-Meta: Loader Waiting for: Product Owner
Projects
GitHub Issues with 👀 3
Status: Waiting for: Product Owner
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jacobbarnes