Bug 273841 – React portal element rendered when clicking on button is not visible half of the time when rendered within an iframe

• Status: NEW
• Component: Layout and Rendering

[Humberto Morimoto]

Created attachment 471304 [details]
Video of issue being reproduced in iframe inside of StackBlitz, pointing how the elements exist on the DOM but are not visible

Whenever it is rendered in an iframe, a React portal element that is added/removed from the render function by the click of a button (and initially not rendered) is just visible every other time it is rendered. The whole component structure exists in the DOM with the same styles across both renders, but in one of them it is simply not visible. We've tried fiddling with things like visibility and z-index with no avail.

A reproduction of the issue can be found in:
https://stackblitz.com/edit/stackblitz-starters-gaok1e?file=src%2FApp.tsx

We tested in the latest versions of Google Chrome, Microsoft Edge and Mozilla Firefox for MacOS and we weren't able to reproduce the issue.

The issue is also not reproducible when rendered directly into the page and not in an iframe.

When the React portal element is rendered on mount the first time and never removed from the DOM, just hidden, the issue doesn't reproduce either.

[Alexey Proskuryakov]

I can reproduce this on first load, but not when I reload the test page. This feels like some kind of race between subresource loading and JavaScript, not a rendering issue.

[Karl Dubost]

It reminds me about something I have seen yesterday about iframes and subresources onload

Not putting them as related yet, because I'm not sure. 

* Bug 33777
* Bug 17761
* Bug 15505


```
<iframe title="Preview page"
        name="previewFrame"
        class="PreviewFrame-iFrame"
        allow="magnetometer; accelerometer; gyroscope; geolocation; microphone; camera; payment; autoplay; serial; xr-spatial-tracking; cross-origin-isolated"
        src="https://stackblitz-starters-gaok1e.stackblitz.io"
        style="background: rgb(255, 255, 255); height: 579px;"></iframe>
```

Accessing directly 
  https://stackblitz-starters-gaok1e.stackblitz.io
indeed doesn't exhibit the issue.


hmmm there are some code targeting Safari too in there. 
For example: 

```
function noop() {}

function trapClickOnNonInteractiveElement(node) {
  // Mobile Safari does not fire properly bubble click events on
  // non-interactive elements, which means delegated click listeners do not
  // fire. The workaround for this bug involves attaching an empty click
  // listener on the target node.
  // https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
  // Just set it using the onclick property so that we don't have to manage any
  // bookkeeping for it. Not sure if we need to clear it when the listener is
  // removed.
  // TODO: Only do this for the relevant Safaris maybe?
  node.onclick = noop;
}
```


Not yet at the source of the issue.

[Radar WebKit Bug Importer]

<rdar://problem/128088591>

[Karl Dubost]

going back to the drawing board.

<div id="app">
    <button 
        type="button"
        aria-roledescription="split button"
        class="ms-Button ms-Button--default ms-Button--hasMenu root-109"
        data-is-focusable="true"
        aria-expanded="false"
        aria-haspopup="true"><span class="ms-Button-flexContainer flexContainer-110"
            data-automationid="splitbuttonprimary">
        <span class="ms-Button-textContainer textContainer-111">
            <span class="ms-Button-label label-113"
                    id="id__0">Standard</span>
        </span>
        <i data-icon-name="ChevronDown"
            aria-hidden="true"
            class="ms-Icon root-105 css-118 ms-Button-menuIcon menuIcon-114"
            style="font-family: FabricMDL2Icons;"></i>
        </span>
    </button>
</div>

Let's look at the change of button at each click. and see the cycling through the 3 clicks.


# Initial Load

<button type="button"
        aria-roledescription="split button"
        class="ms-Button ms-Button--default ms-Button--hasMenu root-109"
        data-is-focusable="true"
        aria-expanded="false"
        aria-haspopup="true"><span class="ms-Button-flexContainer flexContainer-110"
          data-automationid="splitbuttonprimary"><span class="ms-Button-textContainer textContainer-111"><span
                  class="ms-Button-label label-113"
                  id="id__0">Standard</span></span><i data-icon-name="ChevronDown"
           aria-hidden="true"
           class="ms-Icon root-105 css-118 ms-Button-menuIcon menuIcon-114"
           style="font-family: FabricMDL2Icons;"></i></span></button>



# First Click

<button type="button"
        aria-roledescription="split button"
        class="ms-Button ms-Button--default is-expanded ms-Button--hasMenu root-119"
        data-is-focusable="true"
        aria-expanded="true"
        aria-haspopup="true"
        aria-controls="id__0-menu"><span class="ms-Button-flexContainer flexContainer-110"
          data-automationid="splitbuttonprimary"><span class="ms-Button-textContainer textContainer-111"><span
                  class="ms-Button-label label-113"
                  id="id__0">Standard</span></span><i data-icon-name="ChevronDown"
           aria-hidden="true"
           class="ms-Icon root-105 css-118 ms-Button-menuIcon is-expanded menuIcon-120"
           style="font-family: FabricMDL2Icons;"></i><span class="ms-layer"></span></span></button>



# Second click

<button type="button"
        aria-roledescription="split button"
        class="ms-Button ms-Button--default ms-Button--hasMenu root-109"
        data-is-focusable="true"
        aria-expanded="false"
        aria-haspopup="true"><span class="ms-Button-flexContainer flexContainer-110"
          data-automationid="splitbuttonprimary"><span class="ms-Button-textContainer textContainer-111"><span
                  class="ms-Button-label label-113"
                  id="id__0">Standard</span></span><i data-icon-name="ChevronDown"
           aria-hidden="true"
           class="ms-Icon root-105 css-118 ms-Button-menuIcon menuIcon-114"
           style="font-family: FabricMDL2Icons;"></i></span></button>



# Third Click - Menu open

<button type="button"
        aria-roledescription="split button"
        class="ms-Button ms-Button--default is-expanded ms-Button--hasMenu root-119"
        data-is-focusable="true"
        aria-expanded="true"
        aria-haspopup="true"
        aria-controls="id__0-menu"><span class="ms-Button-flexContainer flexContainer-110"
          data-automationid="splitbuttonprimary"><span class="ms-Button-textContainer textContainer-111"><span
                  class="ms-Button-label label-113"
                  id="id__0">Standard</span></span><i data-icon-name="ChevronDown"
           aria-hidden="true"
           class="ms-Icon root-105 css-118 ms-Button-menuIcon is-expanded menuIcon-120"
           style="font-family: FabricMDL2Icons;"></i><span class="ms-layer"></span></span></button>




This is added to body on the first click, but then removed on second click, then readded on the 3rd click.

        var dismissOnLostFocus = function (ev) {
            if (!preventDismissOnLostFocus) {
                dismissOnClickOrScroll(ev);
            }
        };

[Karl Dubost]

The menu is populated in another div

<div id="fluent-default-layer-host" style="position: fixed; z-index: 1000000;"></div>

The size is 0x0 pixel

On first click it is populated 
On second click the children are fully removed.
On third click it is populated again

When populated it is 
<div id="fluent-default-layer-host"
     style="position: fixed; z-index: 1000000;">
    <div class="ms-Layer ms-Layer--fixed root-142"
         data-portal-element="true">
        <div class="ms-Fabric ms-Layer-content content-144">
            <div class="ms-Callout-container container-146">
                <div class="ms-Callout ms-ContextualMenu-Callout root-147 css-102"
                     tabindex="-1"
                     style="top: 51.313708px; left: 8px; max-height: 519.686292px;">
                    <div class="ms-Callout-beak beak-148"
                         style="left: 51.5px; top: -8px;"></div>
                    <div class="ms-Callout-beakCurtain beakCurtain-149"></div>
                    <div class="ms-Callout-main calloutMain-150"
                         style="outline: currentcolor; max-height: 100%;">
                        <div id="id__0-menu"
                             class="ms-ContextualMenu-container container-122"
                             tabindex="-1"
                             aria-labelledby="id__0"
                             role="menu">
                            <div class="ms-FocusZone css-151 ms-ContextualMenu is-open ms-BaseButton-menuhost root-121"
                                 data-tabster="{&quot;uncontrolled&quot;: {}}"
                                 data-focuszone-id="FocusZone26">
                                <ul class="ms-ContextualMenu-list is-open list-123"
                                    role="presentation">
                                    <li role="presentation"
                                        class="ms-ContextualMenu-item item-126"><button
                                                class="ms-ContextualMenu-link root-128"
                                                aria-posinset="1"
                                                aria-setsize="2"
                                                aria-disabled="false"
                                                role="menuitem"
                                                tabindex="0">
                                            <div class="ms-ContextualMenu-linkContent linkContent-132"><i
                                                   data-icon-name="Mail"
                                                   aria-hidden="true"
                                                   class="ms-ContextualMenu-icon icon-152"></i><span
                                                      class="ms-ContextualMenu-itemText label-138">Email message</span>
                                            </div>
                                        </button></li>
                                    <li role="presentation"
                                        class="ms-ContextualMenu-item item-126"><button
                                                class="ms-ContextualMenu-link root-128"
                                                aria-posinset="2"
                                                aria-setsize="2"
                                                aria-disabled="false"
                                                role="menuitem"
                                                tabindex="-1">
                                            <div class="ms-ContextualMenu-linkContent linkContent-132"><i
                                                   data-icon-name="Calendar"
                                                   aria-hidden="true"
                                                   class="ms-ContextualMenu-icon icon-152"></i><span
                                                      class="ms-ContextualMenu-itemText label-138">Calendar event</span>
                                            </div>
                                        </button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[Karl Dubost]

So that looks like a layout and rendering issue. 
The full markup is here with the same style, but it just doesn't show up.