Skip to content

Sidebar can sometimes briefly appear on left side of screen before moving to right #7341

@robertknight

Description

@robertknight

During the migration to Tailwind v4, we had to add a workaround for an issue with CSS @property declarations not working inside Shadow DOM. This workaround involved changing the annotator CSS bundle to be loaded cross-origin so it can be read from JS. After this we observed a problem where the sidebar would sometimes appear in the wrong place, due to a latent problem with the sidebar that was resolved (#7309). While that PR mostly resolved the problem, I have noticed that sometimes immediately after a deployment there can be cases where the sidebar appears on the left side of the screen very briefly and then moves over to the right.

The issue resolved in #7309 is not new. I believe the reason we started seeing it after upgrading to Tailwind v4 is because adding the crossorigin attribute results in the browser making CORS preflight requests before loading the stylesheet, but this needs to be verified.

This issue is about:

  1. Resolving the issue where the sidebar can very briefly appear in the wrong position when it first loads.
  2. Verifying whether CORS preflight requests are impacting annotator CSS bundle load times, and by how much. Depending on the result, we might need to change the workaround added in Add hack to work around issue with shadow DOM and @property #7293 so that it doesn't require reading the stylesheet. For example we could extract the @property rules from the stylesheet and embed them in JS.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions