Intercom Chat iFrame on devices with a notch (CSS issue)

Drew R · 2020-12-30T23:27:55+00:00

Hello, I'm having some issues with our Intercom chat widget on devices with a notch. If you take a look at the screenshot below, you'll see on the left side is the chat at full screen on an iPhone 8 plus (no notch) which looks perfect. On the right side, it's the same app pulled up on an iPhone 11 Pro Max, and you'll see that the input bar is cut off completely because of the addition of the status bar at the top not being accounted for. You can see a tiny bit of the input and if you tap at the very bottom of the screen you can get the keyboard to pop up, but it's a very poor user experience. There are a few quick and dirty hacks that I've tried to fix this issue but without much success. There's a pretty simple way to detect the "safe area" of a screen, which would look something like this: ```height: calc(100% - env(safe-area-inset-bottom));``` That has been working great for us, internally, but the problem is that the safe area value does not get transferred over to the iFrame. So if I try and override some of the styles: ```.intercom-namespace { .intercom-messenger-frame { height: calc(100% - env(safe-area-inset-bottom)) !important; }}``` then it would never work, because that value would be `0` even for devices with a notch. So my next idea was to create a notch detection script on our web app so that we can style this override in a different way, something like this: ```html[data-notch="true"] { .intercom-namespace { .intercom-messenger-frame { height: calc(100% - 44px) !important; } }}``` The downside of this being the hardcoded `44px` value, but it would do the job for now. This does work in that the input shows up correctly at the bottom, but now there's a `44px` gap when the user actually taps on the input and the soft keyboard gets overlaid. I'm running out of ideas on how to quickly fix this on my end. I wanted to reach out to see if anyone had any more ideas that I could try, and to see if this was on your radar to fix. Has anyone else noticed this issue? I was surprised that I couldn't find many threads about this. There was one user with the same exact issue that was posted on the Ionic forums back in March (https://forum.ionicframework.com/t/iframe-and-phone-notch/186094 but hasn't been resolved. Any help is appreciated. Thanks so much!

Intercom Chat iFrame on devices with a notch (CSS issue) | Community

Join the Intercom Community 🎉

Intercom Customers and Employees

Login to the community

Intercom Customers and Employees

Scanning file for viruses.

This file cannot be downloaded