Bugzilla

NI Zibi - I'm guessing this doesn't exist, but wondering if there is some way to listen/wait for Fluent translation on a given element (or even on the root could work). We basically have a race condition with Fluent and our own `childList` MutationObserver callback. But what we do in that callback indirectly depends on Fluent, since it positions the element according to an algorithm that cares about the element's dimensions (which, in turn, depend on the strings that are rendered in the element). The consequences are mitigated by a couple `requestAnimationFrame` calls, but it still occasionally mispositions the element.

Here's what I'm currently thinking:
```js
async function doPositionContainer(position) {
  if (container._translated) {
    // If the callout has already been translated, just position it.
    container.position();
  } else {
    // Synchronously translate strings in the callout because they influence
    // the size of the callout, which will affect position computation.
    document.l10n.pauseObserving();
    await document.l10n.translateElements(
      container.querySelectorAll("[data-l10n-id]")
    );
    requestAnimationFrame(() => container.position());
    document.l10n.resumeObserving();
    container._translated = true;
  }
  container.classList.remove("hidden");
}
```

NI Zibi - I'm guessing this doesn't exist, but wondering if there is some way to listen/wait for Fluent translation on a given element (or even on the root could work). We basically have a race condition with Fluent and our own `childList` MutationObserver callback. But what we do in that callback indirectly depends on Fluent, since it positions the element according to an algorithm that cares about the element's dimensions (which, in turn, depend on the strings that are rendered in the element). The consequences are mitigated by a couple `requestAnimationFrame` calls, but it still occasionally mispositions the element.

Here's what I'm currently thinking:
```js
async function doPositionContainer(container) {
  if (container._translated) {
    // If the callout has already been translated, just position it.
    container.position();
  } else {
    // Synchronously translate strings in the callout because they influence
    // the size of the callout, which will affect position computation.
    document.l10n.pauseObserving();
    await document.l10n.translateElements(
      container.querySelectorAll("[data-l10n-id]")
    );
    requestAnimationFrame(() => container.position());
    document.l10n.resumeObserving();
    container._translated = true;
  }
  container.classList.remove("hidden");
}
```