Reveal.js dissappearing on load when using Bootstrap 4

[camerongreen]

I figured this out but putting it here in case it takes anyone else most of a day to figure it out (I have about 50 external CSS and javascript files in my project that complicated finding this).

I am embedding reveal.js and adding a transition by giving the parent of the reveal div an absolute height and width and setting the following:

{ embedded: true, transition: 'fade' }

This worked fine in my test.html, but when I tried to embed it into a Boostrap 4 website, the slideshow would load for a millisecond and then quickly disappear.

The issue was my use of the transition, which added the class ".fade" which means something different in reveal.js and bootstrap4. There is probably another way to fix this, but not being too invested, I simply used another transition 'fade-out' and things sprung to life.

For fellow embedders, it might be worth Reveal.js (and Bootstrap) thinking about namespacing things in the code. Either .reveal.fade or having some prefix rjs-fade etc.

Thanks for the great framework :)