Skip to content
This repository was archived by the owner on Nov 27, 2025. It is now read-only.
This repository was archived by the owner on Nov 27, 2025. It is now read-only.

Firefox bug with SVG Elements and multiple pointers #8

Open
Open
Firefox bug with SVG Elements and multiple pointers#8
@MidnightDesign

Description

@MidnightDesign
MidnightDesign
opened on Aug 4, 2020

Put the following /demo/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Firefox bug</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .status {
        position: absolute;
        top: 0;
        left: 0;
      }

      .touchable {
        background-color: green;
        width: 500px;
        height: 500px;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <div class="status"></div>
    <svg class="touchable"><rect width="300" height="300" fill="red"/></svg>
    <script type="module">
      import PointerTracker from '../dist/PointerTracker.mjs';
      const status = document.querySelector('.status');
      const touchable = document.querySelector('.touchable');
      const updateStatus = () => status.innerHTML = `Pointers: ${tracker.currentPointers.length}`;
      const tracker = new PointerTracker(touchable, {
        start: () => {
          setTimeout(updateStatus);
          return true;
        },
        end: () => setTimeout(updateStatus),
        move: () => setTimeout(updateStatus),
      });
    </script>
  </body>
</html>

You should see the following:
image

In Chrome, you can put two fingers on either the red or the green area and the number of fingers will be displayed in the top left.

But in Firefox, it only works in the green area. When you put the first finger on red, everything is fine. As soon as you put a second finger down, the number goes to 0.

I've tracked the bug down to Firefox firing the pointercancel event when you put the second finger down. This only seems to occur in SVG elements like rect.

Is this something that should be handled by this library or if this is a bug that should be reported to Mozilla.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions