Weird box-shadow rendering

[adrienmindee]

Hello there, I'd like to start with a thank you, it's a great library you got there and I'm quite happy using it.

I noticed a strange behavior with a "box-shadow" property.

As you can see, the box-shadow property has a bigger size than its container and is therefore cropped. Thus, rendering is a bit clunky. I checked Intercom documentation but I can't find anything about it. Have you encounter this problem ? Do you have an easy solution ? (Maybe injecting styles ?)

I added no special rules in my react code, widget customization (colors) has been done on Intercom website. I got the feeling that this may come from your library but I'm not absolutely sure about it.

You can also witness the same behavior with the widget opened:

Thanks for your time!

[kvendrik]

Hey @adrienmindee!

This issue occurs because the library encapsulates Intercom in an iframe in order achieve the desired effect (nothing being added to the global scope). Originally I fixed the shadow problem but as outlined in the "Notes on reliability" section of the readme there is currently no way to load a specific version of the Intercom library, therefor, its very possible Intercom has since changed something in their library that broke the shadow fix.

Two things:

1. First of all I'd like to say that I'm glad the library is useful. I would however like to reiterate that its an experiment and that it should be used with caution.
2. If you're interested in fixing the shadow problem: check out the custom styles injection which is supposed to fix this issue, you'll likely will have to make some changes to those to fix this.

[adrienmindee]

Allright, I found how to fix the first shadow. (the css class injected does not exist anymore). For the second problem, I think I found it but I need to double check, it's a bit more tricky.

I'll submit a PR on monday or tuesday. Unless you prefer me to fork it and publish my own version. Cheers

[kvendrik]

@adrienmindee a PR sounds great 👍

[adrienmindee]

:wave: To fix first problem: Instead of removing the box-shadow, we can set height and width at 120px (.IntercomHasLauncher class). Shadow appears and isn't cropped out.

To fix second problem, it seems we can tweak IntercomOpen class with width: 500px. Also there is another shadow being cropped (when opened) on top, just above the modal. It can be fixed modifying the box-shadow in intercom-namespace with box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 30px; (last value was 40px).

With all that, it renders nicely BUT, sometimes, the modal opens as if width is < 450px (bottom: 0 and larger, I think this is the mobile rendering). After a really short time, it rerenders as it should but it create a flashing effect which is not really nice.

I really like your approach and the fact that you exposed simple method in your component (+ the ability to unmount it properly) but it ain't reliable enough for my case.

Have fun !

But it seems it will be too much work to make it work in my case and it won't be reliable in the future. I gotta switch to another lib... I hope the above css rules helps you a bit.

Btw, if you want to stick with the shadow hiding trick, note that css classes has been renamed. For example, .intercom-launcher-frame-shadow is now named .intercom-launcher-frame

[kvendrik]

@adrienmindee makes sense, my recommendation would be to use a different library at least until there is a way for us to load a specific version of the Intercom library. As it stands now we can only load the latest version of the library which means these issues can keep occurring. Thank you for sorting out how to potentially solve this, I'll leave the issue open for future reference.