Feature Idea
Closed this issue · 2 comments
Hi.
I've an issue with the overlay size, because my Flexbox parent use transform css.
This create a new stacking context, so the fixed positionning of the overlay doesn't cover the wall page, but only the transformed element..
It will be very great with we can have an option to choose to place the flexbox relativelly to the image (like know), or to place it in an absolute position at the end of the body.
Just a feature idea...
thanks
Thanks for raising a very interesting point.
I have also personally debated with myself a lot about how should I handle the modal box — should it be positioned relatively to the element that triggered it, or to the document body instead. I have opted to go for the former for several reasons:
- Allows for pure-CSS dictation of overlay background. If overlay is positioned relative to document body, it is nested separately from its trigger. Since CSS do not have extensive DOM traversal feature (only descendents and downstream, hence cascading), we will have to resort to a JS-based workaround, which I think is excessively cumbersome to implement.
- Absolutely positioning the overlay would then require positioning the Fluidbox ghost element (the blown up image) in the same context, and this means having to constantly sniff for the position of the trigger element upon layout changes, which can be a performance toll on slower (e.g. mobile) browsers.
I will regretfully file this as will not implement, but will stop short of closing it to hear if there is any good counter arguments about implementation of the alternative DOM manipulation you have suggested.
I solve my problem by adding 'transform: none' at the end of my transition.
In certain case, this workaround could not be apply...
Will see in the future.
thanks