stacking bug when animated with children of fixed elements

[zevdg]

the stage gets rendered over top of the element resulting in an empty white box.

codepen: https://codepen.io/zevdg/pen/QZazyO

possibly related to #126 and/or #97

[rrfranco92]

Did you manage to get a fix on this? Same thing happening to me with a fixed position element.

[Eggwise]

Also having this issue... any fix ?

[ChucKN0risK]

I have the same issue when a parent element has position: sticky. Does anyone have a solution for this?

[rrfranco92]

I ended up using it without animation if I recall correctly.

[ChucKN0risK]

I've noticed that driver.js detected my fixed/sticky HTML element and added on it the .driver-fix-stacking CSS class.

I managed to solve the issue by adding position: relative to this class like so:

.driver-fix-stacking {
  position: relative !important;
}

Hope it helps 😉

[dingyaguang117]

+1

I eventually change fixed to absolute.

[kapooramit]

I have the same issue but I do not see the .driver-fix-stacking class added to my elements. What else could cause this? I would really want to enable animation.

[zengkan0703]

same one. Change fixed to absolute || relative will affect the layout, so I have not find way to solve this problem

[dipiana]

I encounter the same problem.

@kamranahmedse always references to #112 with the solution being #127. I don't see how #127 solves the issue? I could not make it work with a nav which is fixed.

I took one example (from #95, where #127 is referenced as a solution) and put it into CodePen with the latest version of driver.js - the issue still occurs: https://codepen.io/clmsvie/pen/mNjgmK

How could #127 fix that?

Would be great to find a working solution. Thanks a lot in advance.

EDIT: Forgot to link to my codepen.

[leducson]

@zevdg For animate = true, you can overwrite the following css class which will solve your problem

div#driver-highlighted-element-stage, div#driver-page-overlay {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, .75)
}

You can try it directly with the example on your codepen https://codepen.io/zevdg/pen/QZazyO

[tw2as]

@kamranahmedse - would you consider implementing this hack (https://github.com/kamranahmedse/driver.js/issues/133#issuecomment-549714982) into driver.js?

[Tarilonte]

I managed to workaround it by temporarily changing the position of the element while higlighting it.

[guguji5]

It doesn't work in antd Drawer, add style={{ position: 'absolute' }} on Drawer can fix it.

[brizer]

I ended up using it without animation if I recall correctly.

me too. animate: false is works.

[kamranahmedse]

We just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.