Skip to content

EUI Icons not rendering for some users #7852

@scottybollinger

Description

@scottybollinger

Relates to https://github.com/elastic/docsmobile/issues/856

Describe the bug
We have an intermittent issue where some users see a grey box where icons should be. We've held off on opening the issue because it's so hard to consistently reproduce. We now have a hacky way to at least show what users are seeing. We are still on an old version of EUI but updated our staging server with the latest to confirm the issue still exists. See below.

Impact and severity
This is affecting the public facing docs on multiple pages.

Environment and versions

  • EUI version: 95.1.0
  • React version: 18.2.0
  • Kibana version (if applicable): N/A
  • Browser: Chrome
  • Operating System: MacOS

To Reproduce
Steps to reproduce the behavior:

  1. Go to docs staging site (currently on 95.1.0 for testing) also works on live docs (not yet upgraded) in Chrome
  2. Open dev tools
  3. Click on the Performance tab
  4. Click Record button in top left
  5. Refresh the page
  6. See icons broken

Expected behavior
Icons render with no gray boxes

Minimum reproducible sandbox
N/A

Screenshots

Video of repro steps:

2024-06-25_14-37-44.mp4

Other screenshot caught in wild. Note that even icons baked into components (dropdown arrows on left) are grayed out:

image

Additional context
The steps to repo above is the only way we can consistently get the error to occur. We've had several users report it and have yet to have a better way to consistently reproduce. This has been reported by 5-10 users and occurs on mobile Safari as well.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ⚠️ needs validationFor bugs that need confirmation as to whether they're reproducible

    Type

    No type
    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