1545702 - SVG text without textspan doesn't render under certain circumstances

Status: RESOLVED DUPLICATE of bug 1544432

(Core :: SVG, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Originally opened at https://webcompat.com/issues/28814

Steps to reproduce:

0. With Firefox Desktop
1. Go to https://design-for-art.menhera.org/

Expected:

3 Blue lines of text on the top right.

Actual:

Only one line is visible.

Note: This is a direct access to the SVG file, it is not embedded in an HTML document and this is served with an SVG content type.

HTTP/2.0 200 OK
date: Thu, 18 Apr 2019 23:31:01 GMT
content-type: image/svg+xml
content-length: 12382
last-modified: Tue, 02 Apr 2019 15:11:56 GMT
etag: "5ca37bbc-305e"
x-robots-tag: noarchive, notranslate, noimageindex
x-content-type-options: nosniff
referrer-policy: no-referrer
x-xss-protection: 0
x-dns-prefetch-control: off
server: Warp/3.2.25
strict-transport-security: max-age=63072000; includeSubDomains; preload
public-key-pins: pin-sha256="sRHdihwgkaib1P1gxX8HFszlD+7/gTfNvuAybgLPNis="; pin-sha256="YLh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg="; pin-sha256="C5+lpZ7tcVwmwQIMcRtPbsQtWLABXhQzejna0wHFr8M="; pin-sha256="dlCvMpK5HMoo/MkyPzhKFEs2nGiWqiP2I6DZ5XZlRzE="; pin-sha256="7OQNifij/hI+0P0FTjED5u+LCxw2zTsrsn3S1wVeR38="; max-age=63072000;
content-security-policy: sandbox; default-src 'none'; style-src 'unsafe-inline' https://code.cdn.mozilla.net; font-src https://code.cdn.mozilla.net; img-src data:; frame-ancestors 'none'; base-uri 'none'; upgrade-insecure-requests
access-control-allow-origin: *
accept-ranges: bytes
X-Firefox-Spdy: h2

Here the partial markup of the issue.

<g xmlns="http://www.w3.org/2000/svg" font-family="Fira Sans">
  <a xlink:href="https://desktopd.eu.org/" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text text-anchor="end" x=".95" y=".1" font-size=".025" fill="#00c7ff">Annual Clock (SVG) (2015)</text>
  </a>
  <a xlink:href="https://nanashinyan.menhera.org/" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text text-anchor="end" x=".95" y=".15" font-size=".025" fill="#00c7ff">Collaborative Twitter Bot (2018)</text>
  </a>
  <a xlink:href="https://h09.eu/" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text text-anchor="end" x=".95" y=".2" font-size=".025" fill="#00c7ff">
      <tspan font-style="italic">H09.EU</tspan>Blogging Platform (2018)</text>
  </a>

<!-- cut for brevity -->

</g>

Some interesting details.

The viewport is setting the canvas to be 0 to 1.

<svg xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink" 
         width="100%" height="100%" 
         viewBox="0 0 1 1">

When we reduce the size of the window, starting 480px wide, the invisible texts starts to flicker and appears/disappears until 418px where they become stable and stays put.

This is working in

• Chrome Canary latest edition Version 75.0.3769.0 (Build officiel) canary (64 bits)
• Safari Tech Preview Release 80 (Safari 12.2, WebKit 14608.1.16)

Comment 1

[Karl Dubost💡 :karlcow]

Thanks to Brian Birtles for helping with the diagnosis.
See https://webcompat.com/issues/28814

Comment 2

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 3

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.