-
Notifications
You must be signed in to change notification settings - Fork 215
Description
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:
- Resolving the issue where the sidebar can very briefly appear in the wrong position when it first loads.
- 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
@propertyrules from the stylesheet and embed them in JS.