Split Button: FAB slot placement in Firefox and Safari browsers

[geospatialem]

Actual Behavior

When slotting dropdown-items into a split-button's fab slot some browsers (Firefox and Safari) are placing the component underneath parent components, even if using overlay-positioning="fixed".

Expected Behavior

The fab slot should perform similar to the experience in Chrome/Edge and to the footer-actions slot where any slotted child components are depicted with the highest z-index.

Reproduction Sample

https://codepen.io/geospatialem/pen/xxzrJpO

Reproduction Steps

1. Open the sample in Firefox or Safari
   • In some cases, try to resize the browser to a smaller width and height
2. Select the "Add" Split button drop-down
3. Observe the dropdown-items placement underneath the calcite-flow-item

Reproduction Version

beta.98

Relevant Info

Browsers effected:

• Windows and Mac - Firefox
• Mac - Safari

Regression?

No response

Impact

The Map Viewer team needs to use the fab slot to maintain design functionality, in particular with the "Layers" panel, so users have the ability to add layers to the map.

fab slot

footer slot

Esri team

ArcGIS Map Viewer

[driskull]

This seems to be a FF bug. It seems like they don't handle a fixed element inside an element positioned as sticky. The fab slot is positioned sticky to stay in the same place when scrolled. Seems like they won't fix it.

https://bugzilla.mozilla.org/show_bug.cgi?id=1514291
https://bugzilla.mozilla.org/show_bug.cgi?id=1452006

Unrelated question, is it valid for slotting a calcite-split-button inside a panel with the fab slot? Seems like our fab slot says...

* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.

So isn't this not even a valid thing to do? Either that or our doc needs to be more specific on what is allowed.

[driskull]

If we are going to allow other things slotted in the fab slot, maybe we can rename the slot and update the doc?

Maybe the slot could be named to reflect that whatever slotted will positioned stuck at the bottom.

[geospatialem]

Unrelated question, is it valid for slotting a calcite-split-button inside a panel with the fab slot? Seems like our fab slot says...

@slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.

Was wondering this as well, but the use case seemed to be a bit different than the footer-actions slot, so maybe speaks to your next comment on the slot rename.

If we are going to allow other things slotted in the fab slot, maybe we can rename the slot and update the doc?

This could be a good path forward, since the slot has different benefits/uses than the footer-actions slot.

[driskull]

I'll defer to @jcfranco but as it stands the doc really says that only a fab is allowed in that slot so this issue is "technically" invalid :)

[geospatialem]

There is a workaround using the footer slot, which mitigates the issue:

<calcite-split-button overlay-positioning="fixed" primary-text="Add" appearance="outline" primary-icon-start="layers" slot="footer">

Reached out to the Map Viewer team to determine if the workaround fits the need, or determine the use case for the fab slot prior to closing or issue prioritization post 1.0.

[geospatialem]

Will review once PR #6520 has been incorporated to review the above issue.

[geospatialem]

Still occurring in Firefox in 1.3.1 - Codepen has been updated.

From the MV team:

Not high priority since its occurring in Firefox, but definitely something they would like fixing. Moving to the upcoming R03 release.

[geospatialem]

Via Chris and @rebollin:

This would seem a common pattern for how apps would put together these components (layer list + browse / some action)...maybe forgetting something but it would seem odd to drive that from the footer (even though MV already in spots like the basemap gallery.

[rebollin]

Hi @geospatialem! What is the likelihood of getting this fix in for R03?

[driskull]

@geospatialem @jcfranco Maybe we could have a different slot that doesn't position sticky but just always places at the bottom absolutely?

[jcfranco]

I'm not sure adding an absolutely-positioned slot is the way to go since its contents would scroll.

As Matt said, this is a Firefox bug (found a couple more), which limits our options. There are some additional workarounds for this:

• The split button can be absolutely-positioned within the default content slot via @macandcheese
• Setting overlay-positioning=absolute (default) will prevent clipping by positioning within the panel, but it might not be ideal depending on the width of the dropdown-groups/items and panel.

WRT the fab slot doc, we could leave as is or revisit it to be a bit more generic. We have some slots that are designed with a specific component in mind, so YMMV when deviating.

[jcfranco]

FWIW, I also submitted a Webkit bug based on one of the FF issues.