0

the application I write consists of many routes with transition animations between routes. It looks like:

<section class="a animated bounceUp">...</section>
<section class="b">...</section>

When I change route it will show animation and render new content - pretty simple behavior.

Today I created a new section and I need to put inside fixed filters pinned to the viewport. It should look like:

<section class="a">...</section>
<section class="b">...</section>
<section class="c animated bounceDown">
 <div class="fixed-filters">...</div>
 <div>...</div>
</section>

And here I met my problem. I added fixed position to div, but it doesn't work. The element hasn't fixed position.

Of course I made research about that and I found articles like: 'transform3d' not working with position: fixed children and https://www.achrafkassioui.com/blog/position-fixed-and-CSS-transforms/

Which says that I can't do that, because:

'transform' creates a new local coordinate system:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

Is that over? Or maybe is there any solution how to do that? I will be grateful for your help in solving this problem or finding a good workaround that anyone could use.

Dizip
  • 85
  • 7
  • 1
    I don't think you can find a CSS solution, as you already found transform break any fixed position. You may rely on some JS or try to move the fixed element outside – Temani Afif Nov 11 '18 at 19:13
  • Or transform each sibling of the fixed element or use suboptimal left/right/op/bottom properties instead of transform. Relocating the fixed element outside the transformed ancestor (in HTML or via JS) as suggested by Temani is better IMHO – FelipeAls Nov 12 '18 at 08:43

0 Answers0