justin_67784 | Stripe Developers | Page 1

hazy shoalBOT Dec 21, 2023, 7:41 PM

#

wispy seal Dec 21, 2023, 7:42 PM

#

Hi 👋

I have seen something like this before. In the past it was a framework putting a restriction in the click through of their CSS.

#

Watching the video, that is identical to what we saw previously

mellow scroll Dec 21, 2023, 7:43 PM

#

This project uses React and Remix.

hazy shoalBOT Dec 21, 2023, 7:46 PM

#

mellow scroll Dec 21, 2023, 7:47 PM

#

CSS is loading in fine with the request as well.

Screenshot_2023-12-21_at_11.46.26_AM.png

wispy seal Dec 21, 2023, 7:49 PM

#

Can you check your CSS rules for any pointer-events: none style rules?

#

Are you using Radix UI?

mellow scroll Dec 21, 2023, 7:50 PM

#

Yes, we ARE using Radix and Tailwind

wispy seal Dec 21, 2023, 7:50 PM

#

Okay that is a known problem with Radix UI when loading a modal.

#

When a modal pops up it sets <body style="pointer-events: none"> on your site

#

This prevents the 3DS modal from being able to receive pointer events

mellow scroll Dec 21, 2023, 7:51 PM

#

It looks like it's applying a pointer-events: none to the body.

wispy seal Dec 21, 2023, 7:51 PM

#

There's a work around, which is to add this custom style rule to your site

body div:first-child {
  pointer-events: auto !important;
}

mellow scroll Dec 21, 2023, 7:52 PM

#

Perfect.

wispy seal Dec 21, 2023, 7:52 PM

#

Because Stripe will append the modal div as the first child of your <body> element

#

We're trying to make a more elegant fix but for right now that's the best option

mellow scroll Dec 21, 2023, 7:54 PM

#

It's not hacky, not a bad fix for an edge case. Thanks for the quick help!

#justin_67784