Using transform: translate3d breaks any fixed position children (sticky headers for example)

[lauriejones]

This is a specific use case that won't affect everyone but thought I'd let you know.

I am using this carousel to display a number of products. Each of these products has a header, a long-ish product description and then a footer. These product headers are sticky in that they become position:fixed; once they reach the top of the window and then scroll with you.

There is a known bug with css that stops position:fixed from working when the element or parent has been transformed: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

To solve this we have had to revert back to an earlier version that still uses left to position the carousel. If this could be a configurable option(translate or left), that would be ideal. I understand the animation benefits of transitioning the translate property over the left property so it would make sense that that is the default.

Completely understand if this is not something you are interested in, otherwise I could work on getting a PR together.

Cheers,
Laurie

[kenwheeler]

PR would absolutely be welcome for this. I've dealt with this in my slick.js project and I have the option there. Perhaps a useTransforms prop?

[sarmeyer]

@lauriejones I realize it's been quite a while since this issue surfaced and there have been some major refactors and updates to Nuka since then - if this is still an issue for your implementation of the carousel, please let us know by reopening this issue and including a sandbox or example/gif of what you're seeing so we can try to reproduce. Thanks!