josh_paymentelement-skeleton | Stripe Developers | Page 1

placid shaleBOT Mar 23, 2026, 4:40 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1485679615513989205

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

josh_googlepay-firefox, 3 days ago, 16 messages

#

warm lantern Mar 23, 2026, 4:41 PM

#

josh_paymentelement-skeleton

#

@forest lodge can I ask for a bit more details like a video repro and/or a live demo?

forest lodge Mar 23, 2026, 4:43 PM

#

warm lantern Mar 23, 2026, 4:44 PM

#

gotcha. Based on the layout it seems you have a "parent div" around it and then something below, I wonder if you have a max height or similar that causes this.
Can you share a URL where I can see this live and compare?

forest lodge Mar 23, 2026, 4:45 PM

#

I threw it on a new page and it is the same issue.

#

I threw in a debugger at loaderstart... it looks like it is calculated at 321px? But 335px seems to show the full loader.

warm lantern Mar 23, 2026, 4:47 PM

#

Can you maybe share more than the picture? Which browser is this
Sorry, I'm lacking details to reproduce at this point.

forest lodge Mar 23, 2026, 4:52 PM

#

Yeah looks like it reproduces in Chrome as well as FireFox. Can you share out a sandbox with the shimmer working? I'll work on eliminating things.

warm lantern Mar 23, 2026, 4:56 PM

#

https://4242.io/test/payment-element/ works fine for me for example, that's why I'm not fully grasping the problem yet.
So same for you, can you share a demo where it doesn't work?

forest lodge Mar 23, 2026, 4:56 PM

#

Getting closer to repro... looks like it relates to appearance

#

Do you have a condensed demo?

warm lantern Mar 23, 2026, 4:57 PM

#

what does "condensed" mean?

#

yeah I've seen this before too and we've patched those recently. So you likely have some option that I don't. I tried multiple of my local demos but they all appear to work. But it's also really subtle for me since it loads really fast

forest lodge Mar 23, 2026, 4:57 PM

#

inputs: 'condensed',

warm lantern Mar 23, 2026, 4:58 PM

#

ack, let me try!

#

no still loads properly for me

forest lodge Mar 23, 2026, 5:01 PM

#

Doh let me keep eliminating appearance settings

warm lantern Mar 23, 2026, 5:02 PM

#

do you have a live page I can load? Even with just ngrok or similar?

forest lodge Mar 23, 2026, 5:03 PM

#

I can get something this afternoon

warm lantern Mar 23, 2026, 5:05 PM

#

Can you share your current code?

#

I want to flag to the product team to be safe and they might just know from the basic code

forest lodge Mar 23, 2026, 5:08 PM

#

Yeah let me get it

#

Ok looks like .Label with a custom line height causes the issue.

#

          inputs: 'condensed',
          rules: {
            '.Input--invalid': {
              borderColor: COLOR_TEXT_ERROR
            },
            '.Label': {
              color: COLOR_TEXT_TERTIARY,
              fontSize: `${FONT_SIZE_200 / 16}rem`,
              letterSpacing: `${FONT_LETTERSPACING_200 / 16}rem`
              lineHeight: String(FONT_LINEHEIGHT_DEFAULT)
            },
            '.Error': {
              fontSize: `${FONT_SIZE_100 / 16}rem`,
              fontWeight: String(FONT_WEIGHT_NORMAL)
            }
          },
          variables: {
            colorDanger: COLOR_TEXT_ERROR,
            fontFamily: `${FONT_FAMILY_PRIMARY}, sans-serif`
          }
        },```

#

export const FONT_LINEHEIGHT_DEFAULT = 1.5;

#

I might have to disappear to meetings but I can check my messages later today

warm lantern Mar 23, 2026, 5:15 PM

#

all good, if you have more code that'd help you have hardcoded variables here that I have to invent

placid shaleBOT Mar 23, 2026, 5:16 PM

#

warm lantern Mar 23, 2026, 5:28 PM

#

cc @forest lodge in case you do see this

#

okay I was able to guess values and reproduce and flagged to the product team

forest lodge Mar 23, 2026, 5:37 PM

#

Thank you!

#josh_paymentelement-skeleton