search

metafizzy / flickity-fullscreen

Enable fullscreen view for Flickity carousels
46 stars 17 forks source link

Fullscreen not fullscreen with transform parent element #13

Open macsupport opened 6 years ago

macsupport commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

The Liquid container leaves a translate on the container div.

macsupport commented 5 years ago

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

desandro commented 5 years ago

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