1954054 - www.ft.com - Key map elements are not shown

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase]

Environment:
Operating system: Android 15/Windows 10
Firefox version: Firefox Mobile [phone]

Preconditions:

• Account needed
• Must be logged in

Steps to reproduce:

1. Go to https://www.ft.com/content/6c9d0cee-43cf-47ee-8bb6-8e6a16fbd968
2. Scroll down the page until you reach the map.
3. Observe the map.

Expected Behavior:
Location of the minerals are shown on the map.

Actual Behavior:
Location of the minerals are not shown on the map, the elements are missing.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/149767

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Can reproduce without ft.com and login here: https://flo.uri.sh/visualisation/22024721/embed

Comment 3

[Holger Benl]

The console shows errors "DOMException: Index or size is negative or greater than the allowed amount".
They are thrown by this function:

getImageData(e3, t2 = 0) {
  return this.getImageCanvasContext(e3).getImageData(-t2, -t2, e3.width + 2 * t2, e3.height + 2 * t2);
}

where e3 is an <img>, getImageCanvasContext(e3) returns a Canvas 2D context and e3.height and t2 are 0, so getImageData() is trying to get image data with zero height, which throws (in Chrome as well).
e3.height should not be 0! It is set here:

function loadImageIntoStyle(map4, image_id, imgSrc, size, crossOrigin = false) {
  const image = new Image();
  return new Promise((resolve, reject) => {
    image.onerror = (e) => {
      console.error(e);
    };
    const url = new URL(imgSrc);
    if (crossOrigin) {
      image.crossOrigin = "Anonymous";
    }
    image.onload = () => {
      try {
        image.width = size;
        image.height = image.naturalHeight / image.naturalWidth * size;
        if (!map4.hasImage(image_id)) {
          map4.addImage(image_id, image);
        }
        resolve(image);
      } catch (error) {
        console.log(error);
        reject(image);
      }
    };
    if (url.pathname.endsWith(".svg")) {
      fetch(imgSrc).then((r) => r.text()).then((data4) => {
        image.src = `data:image/svg+xml;base64,${window.btoa(data4)}`;
      });
    } else {
      image.src = imgSrc;
    }
  });
}

where imgSrc is a data URL containing an SVG image, for example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{stroke:#208fce;stroke-miterlimit:10;stroke-width:1.5px;}.cls-4{fill:url(#_19-1.5);}</style><clipPath id="clip-path"><rect id="SVGID" class="cls-1" width="100" height="100"/></clipPath><pattern id="_19-1.5" data-name="19-1.5" width="100" height="100" patternTransform="translate(-96.57 -16.28)" patternUnits="userSpaceOnUse" viewBox="0 0 100 100"><rect class="cls-1" width="100" height="100"/><g class="cls-2"><line class="cls-3" x1="46.97" y1="-53.03" x2="153.03" y2="53.03"/><line class="cls-3" x1="41.97" y1="-48.03" x2="148.03" y2="58.03"/><line class="cls-3" x1="36.97" y1="-43.03" x2="143.03" y2="63.03"/><line class="cls-3" x1="31.97" y1="-38.03" x2="138.03" y2="68.03"/><line class="cls-3" x1="26.97" y1="-33.03" x2="133.03" y2="73.03"/><line class="cls-3" x1="21.97" y1="-28.03" x2="128.03" y2="78.03"/><line class="cls-3" x1="16.97" y1="-23.03" x2="123.03" y2="83.03"/><line class="cls-3" x1="11.97" y1="-18.03" x2="118.03" y2="88.03"/><line class="cls-3" x1="6.97" y1="-13.03" x2="113.03" y2="93.03"/><line class="cls-3" x1="1.97" y1="-8.03" x2="108.03" y2="98.03"/><line class="cls-3" x1="-3.03" y1="-3.03" x2="103.03" y2="103.03"/><line class="cls-3" x1="-8.03" y1="1.97" x2="98.03" y2="108.03"/><line class="cls-3" x1="-13.03" y1="6.97" x2="93.03" y2="113.03"/><line class="cls-3" x1="-18.03" y1="11.97" x2="88.03" y2="118.03"/><line class="cls-3" x1="-23.03" y1="16.97" x2="83.03" y2="123.03"/><line class="cls-3" x1="-28.03" y1="21.97" x2="78.03" y2="128.03"/><line class="cls-3" x1="-33.03" y1="26.97" x2="73.03" y2="133.03"/><line class="cls-3" x1="-38.03" y1="31.97" x2="68.03" y2="138.03"/><line class="cls-3" x1="-43.03" y1="36.97" x2="63.03" y2="143.03"/><line class="cls-3" x1="-48.03" y1="41.97" x2="58.03" y2="148.03"/><line class="cls-3" x1="-53.03" y1="46.97" x2="53.03" y2="153.03"/></g></pattern></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-4" width="100" height="100"/></g></g></svg>

After loading the <img>, its naturalWidth and naturalHeight properties are 0 in Firefox but larger than 0 in Chrome.
To reproduce this, open data:text/html,<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C/svg%3E" onload="console.log(this.naturalWidth, this.naturalHeight)"> and look at the output in the console.