Bootstrap modals inside c-offcanvas-content-wrap creates two backdrops

[TheTimeWalker]

There seems to be an issue with modals being inside an div with class c-offcanvas-content-wrap. Whenever a modal that's inside the class is being opened up, it creates two backdrops.

Both are from the modal backdrop and the canvas backdrop and closing the modal only removes one backdrop, being essentially stuck with a dark background.

Here's a Codepen example: https://codepen.io/anon/pen/djWgbY
Just click on "Launch demo modal"

This was mentioned in an closed issue here: #18 (comment)

[vmitsaras]

a quick fix for this

.modal-open .c-offcanvas-content-wrap {
 -webkit-transform:none;
    transform: none;
    position: static;
}

[TheTimeWalker]

Thanks! I've made one addition where the modal wouldn't weirdly pop up from the darker background to the foreground by adding in transition: none like this:

.modal-open .c-offcanvas-content-wrap {
 -webkit-transform:none;
    transform: none;
    position: static;
    transition: none;
}

It seems almost perfect. I noticed that with that snippet all absolute positioned objects move around at the end of the animation.

I've modified the codepen again to showcase this issue: https://codepen.io/anon/pen/zLdMPr
You'll notice that the "Bootstrap starter" block goes back to top when the modal pops up

[vmitsaras]

content-wrap is only necessary for the push/reveal option

[TheTimeWalker]

Yup, I'm using both overlay and push options for different off-canvases

Anyway, I've updated the CSS and JS with the newest version and I can confirm that this fixed the issue. For the absolute positioned objects, I moved them as they're now permanently on a different position from your changes. Now everything's perfect. Thanks!