Fullscreen not fullscreen with transform parent element

[macsupport]

I'm using flickity fullscreen within a card in a uikit masonry grid ( I know, I should use yours...) and getting this odd behavior. When trying to open a full screen flickity carousel, it opens within the card div inside the grid not fullscreen in the grid itself, so I get a "mini fullscreen flickity". Any flickity fullscreen option to bypass this annoying behavior, I.e choose body or a class to open flickity in?

Heres the codepen

[desandro]

Thanks for reporting this issue. Looks like because uikit Masonry uses CSS transforms for positioning, a child element with position: fixed will use that transformed parent element for its fixed position, not the body. Hey, I didn't know that one either.

[MrChriZ]

I've just ran into this issue but using Liquid Fire from an Ember Application.
Possibly linked to this issue? ember-animation/liquid-fire#597

The Liquid container leaves a translate on the container div.

[macsupport]

I'm assuming this is not fixable at this point?

[desandro]

As this is a browser rendering issue, the fix would be to change whatever library is using transform to position: absolute with left, top.