www.bloomberg.com - Hover does not work properly to select the vaccine provider

[webcompat-bot]

URL: https://www.bloomberg.com/graphics/covid-vaccine-tracker-global-distribution/#dvz-section-purchasing

Browser / Version: Firefox 86.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: Hover does not work properly to select the vaccine provider
Steps to Reproduce:
Slide the mouse pointer down the left. You will see that the right vaccine is not selected. This fails on Fx Beta and Fx Nightly but works on Chrome.

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. Scroll down to "Shots Across the Globe" graph and try to choose a vaccine. The graph keeps jumping.

Tested with:
Browser / Version: Firefox Nightly 86.0a1 (2021-01-03)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[wisniewskit]

They add a couple of listeners to the SVG graphic here in this svelte code:

  onMount(() => {
    tt = tooltips(svg, {
      template: '<div data-side="{side}"><h4>{title}</h4>{extraNotes}<div class="value-breakdown">{valueBreakdown}</div></div>',
      class: `dvz-tooltip-arrowed tt-sankey tt-sankey-side`,
      dataTransform,
      dataFor,
      tabFocus: false,
    });

    svg.addEventListener('mousemove', interact);
    svg.addEventListener('mouseover', interact);
    svg.addEventListener('touchstart', interact);
    svg.addEventListener('touchmove', interact);
    svg.addEventListener('focus', interact);
    svg.addEventListener('touchend', stopInteract);
    svg.addEventListener('blur', stopInteract);
    svg.addEventListener('mouseout', stopInteract);

    stopInteract(); // default
  });

So for our purposes, on mouse move or over interact will be called, and on mouse out, stopInteract will be called. And this is happening in both browsers (while you move around on the map, "interact" is being constantly called, and the moment you transition between shapes, "stopInteract" is called).

Also, the event targets are the same in both browsers: either the SVG path for the biotech company that you're hovering over, or the SVG itself if in between them. So this must have something to do with their code, since it's highlighting the top option even while handling events for whatever company the mouse is actually on.

This is the interact svelte code:

  const interact = (e) => {
    let offsetX, offsetY;
    const bounds = svg.getBoundingClientRect();
    if (e.type.startsWith('mouse')) {
      /* eslint-disable prefer-destructuring */
      offsetX = e.offsetX;
      offsetY = e.offsetY;
      /* eslint-enable prefer-destructuring */
    } else if (e.type.startsWith('touch')) {
      offsetX = e.targetTouches[0].pageX - bounds.x;
      offsetY = e.targetTouches[0].pageY - bounds.y;
    }
    if (offsetX && offsetY) {
      const side = Math.round(offsetX / width);
      let { nodes } = sankeyData.nodes;_e.y0, 
      if (side === 0) { // Left-side, where no target links data
        nodes = sankeyData.nodes.filter((d) => d.targetLinks.length === 0);
      } else if (side === 1) { // Right-side, where no source links data
        nodes = sankeyData.nodes.filter((d) => d.sourceLinks.length === 0);
      }
      let closestNodeVertically = null;
      for (let i = 0; i < nodes.length; i += 1) {
        const thisNode = nodes[i];
        if (offsetY >= thisNode.y0 && offsetY <= thisNode.y1) {
          closestNodeVertically = thisNode;
          break;
        }
      }
      const allLinkPaths = svg.querySelectorAll('.link-group path');
      const allNodeGroups = svg.querySelectorAll('.rect-group g');
      if (closestNodeVertically) {
        if (side === 0) {
          source = closestNodeVertically.id;
          target = null;
          Array.from(allLinkPaths).forEach((linkPath) => {
            if (linkPath.getAttribute('data-source') === source) {
              linkPath.setAttribute('stroke', linkPath.getAttribute('data-stroke'));
            } else {
              linkPath.setAttribute('stroke', defaultStroke);
            }
          });
          Array.from(allNodeGroups).forEach((group) => {
            if (group.getAttribute('data-id') === source) {
              group.setAttribute('data-selected', '1');
            } else {
              group.setAttribute('data-selected', '0');
            }
          });
        } else if (side === 1) {
          target = closestNodeVertically.id;
          source = null;
          Array.from(allLinkPaths).forEach((linkPath) => {
            if (linkPath.getAttribute('data-target') === target) {
              linkPath.setAttribute('stroke', linkPath.getAttribute('data-stroke'));
            } else {
              linkPath.setAttribute('stroke', defaultStroke);
            }
          });
          Array.from(allNodeGroups).forEach((group) => {
            if (group.getAttribute('data-id') === target) {
              group.setAttribute('data-selected', '1');
            } else {
              group.setAttribute('data-selected', '0');
            }
          });
        }
      } else {
        Array.from(allLinkPaths).forEach((linkPath) => {
          linkPath.setAttribute('stroke', defaultStroke);
        });
        Array.from(allNodeGroups).forEach((group) => {
            group.setAttribute('data-selected', '0');
        });
        if (side === 0) {
          source = null;
        } else if (side === 1) {
          target = null;
        }
      }
      dispatch('change', {
        source,
        target,
      });
    }
  }

Sure enough, the source it ends up using sometimes in the final dispatch is the top one in Firefox, somehow.

So the use of offsetY is the culprit. There is an open spec bug about how Firefox offsets from the event.target's position, while Chrome offsets to the SVG: w3c/csswg-drafts#1508

As mentioned in that spec bug, it's possible for Bloomberg to fix this just by ignoring pointer-events on the SVG Paths:

path.svelte-zc3q4r.svelte-zc3q4r {
  pointer-events:none;
}

I don't see any obvious bugs in Bugzilla about this, so I've also filed this one to hopefully finally figure out this interop issue.

[wisniewskit]

A fix for this just landed in the latest Firefox nightly build, and I've confirmed that it works. We might still want to reach out to the site for an improved experience for Firefox ESR users, so I'll this issue open.

[softvision-oana-arbuzov]

The layout has changed and the issue no longer occurs.
URL: https://www.bloomberg.com/graphics/2020-coronavirus-cases-world-map/

URL: https://www.bloomberg.com/graphics/covid-vaccine-tracker-global-distribution/#us

Tested with:
Browser / Version: Firefox Nightly 93.0a1 (2021-08-23)
Operating System: Windows 10 Pro