markerjs2
markerjs2 copied to clipboard
Style don't always load
Currently unable to reproduce outside of a our main project, but we'll keep trying.
After refreshing the page after a four or five times, the MarkerArea styles stop loading. After that, you have a good chance that the styles won't load on next refresh.
Typically this happens of a page with multiple MarkerAreas. Other factors that I think are relevant, are:
- We call the
show()
function, then immediately after, theblur()
function, based on anIntersectionObserver
deeming that the whole element is in view. - The SVG images for the toolbar are present, but unstyled and massive.
- The styles that are applied directly to the element are present.
- It is just styles that are added to the head that aren't loaded.
- We use a pointer over event to activate the MarkerArea, in the event the the IntersectionObserver doesn't fire. This event seems to trigger the styles to load correctly.
- The
<style>
tag is not present, until after the scenario in point 5.
So it seems the toolbar is loading, so the addStylesheet()
should have been called multiple times. Leading me to believe that the element has been created, but not attached. Once created, the code doesn't attempt to attach a second time.
We'll continue to diagnose the issue here, but if you have any thoughts, they'd be very much appreciated.
We've noticed that this only happens on pages that have existing annotations on it, I'm not clear on the significance of that yet. But I have noticed that the styles flash up, then disappear, so it's starting to feel like race conditions.
When a new MarkerArea
is instantiated, removeStyleSheet
is run. It is the only code I can see that removes the style element. But for it to run, it must be under the impression that it has a style element to remove.
Edit: Of course, it's a static function.
Edit, edit: I'm reasonably convinced that this a case of use trying to activate the first MarkerArea
, before the last has finished loading.