Content incorrect horizontal position

[Bouke]

When the dropdown is opened:

Resizing the browser window while leaving the dropdown open:

I happens in Firefox 73.0.1 on Windows, but not on Safari 13 on macOS.

When using "renderInPlace", the issue doesn't occur. However I want to use the wormhole because of the automatic positioning (above/below).

I have no clue on how to debug this in any meaningful way. Any suggestions?

[Bouke]

After digging through the source, I found a difference between my application and the demo website.

On the demo website the "calculateWormholedPosition" method is called twice:

1. the dropdown is shown, however not positioned absolute and is concatenated to the bottom of the page, causing a scrollbar to appear.
2. calculateWormholedPosition is called from reposition
3. Dropdown content is changed to absolute positioning, and thus causes scrollbar to disappear.
4. calculateWormholedPosition is called second time from MutationObserver. This second call repositions the dropdown based on hidden scrollbar.

My app has a centered body containing the trigger. So when a scrollbar appears, the content region becomes ~15 px smaller, causing the trigger to move left by ~7px. This means that:

1. showing the dropdown in step 1 causes a scrollbar to appear, moving the trigger left 7px.
2. In step 2 the dropdown's target position is determined on the new location of the trigger.
3. In step 3 the scrollbar is hidden again; the trigger moves right 7px.

So far no issues, however in my app, MutationObserver is not triggered and step 4 doesn't happen. So the position is still taking the scrollbar into account, however the scrollbar has been hidden; causing the dropdown to be incorrectly placed.

This leads me to the following questions:

1. I'm not familiar with MutationObserver. The break point registering (.observe(...)) is hit, but the actual callback isn't called. Any ideas on how to debug further?
2. Showing the dropdown in step 1 and moving the dropdown in step 3 triggers a redraw/reflow of the page in the browser. This is wasteful (CPU) and could be avoided by not drawing the dropdown until it has been moved.