Skip to content

[BUG]: Text first drawn outside a full redraw keeps fallback font sizes after its web font loads #8099

Description

@camdecoster

Description

#8094 redraws a plot when a web font loads during its draw. Text that is first drawn outside _doPlot still keeps its fallback font sizes. One example is a treemap that zooms through Plotly.animate with redraw: false. Drawing.bBox caches the fallback sizes, so the text stays wrong after the user zooms away and back. Hover labels also measure with the fallback font, but they correct themselves on the next hover because they are not cached.

Screenshots/Video

Image

Steps to reproduce

  • Run Plotly devtools and open the browser devtools console
  • Run the following snippet to create a treemap starting on level B:
    const family = `JetBrainsMono`;
    document.fonts.add(
      new FontFace(
        family,
        `url(https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.20/files/jetbrains-mono-latin-400-normal.woff2)`,
      ),
    );
    
    const label = "I am Lrrr, of the planet Omicron Persei 8.";
    Plotly.newPlot(
      gd,
      [
        {
          type: "treemap",
          ids: ["root", "A", "B", "a1", "a2", "b1"],
          labels: ["root", "A", "B", label, label, label],
          parents: ["", "root", "root", "A", "A", "B"],
          values: [0, 0, 0, 30, 20, 25],
          // Start zoomed into B. Only the leaves of A use the web font.
          level: "B",
          textfont: {
            family: ["Arial", "Arial", "Arial", family, family, "Arial"],
          },
        },
      ],
      { width: 700, height: 500 },
    );
  • Click the root to zoom out. The leaves of A draw for the first time, and the font starts to load.
  • Note that the labels in A overflow the containers

Notes

  • A fix that skips the bBox cache while document.fonts.status is loading corrects the second view. It also turns off the cache for all text on the page during font loads, which makes first draws 20-30% slower. Clearing the cache entries for a font when that font loads can be a cheaper option.
  • The issue is rare. The font must be used only by text that a partial redraw draws first.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions