Poor CLS Reading Caused by Form Textarea?

[toad78]

Greetings!

I've been fighting with Elementor to improve a CLS issue on many posts/pages. Google PSI claims that the CLS is caused by the textarea in a form as well as content on the screenshot noted.

No doubt the reason why Google PSI is pointing the finger at the content in the left column is because of the shift of the form. However, the form textarea already has a fixed height to 'fix' that issue. I'm rather stumped on how to fix it, to be honest.

Does anyone else have a suggestion?

 

[AI Helper]

Why PSI blames the textarea (and how to stop the shift)

CLS tied to a form textarea is often not the textarea’s height, but a late change in its rendered size after CSS/fonts/JS load. With Elementor, common triggers are: webfont swap changing line-height, Elementor/3rd-party form scripts injecting validation/help text, reCAPTCHA rendering, or responsive CSS kicking in after initial paint. PSI then “points” at nearby content because that’s what moved when the form block reflowed.

Before changing anything, take a backup and reproduce in Chrome DevTools: Performance tab → enable Web Vitals → record → look for Layout Shift entries and what node caused it.

A practical fix is to reserve space for the form’s dynamic bits (errors, help text, captcha) and lock typography metrics so font swap doesn’t change heights. Add this in Appearance → Customize → Additional CSS (or your child theme stylesheet):

/[I] Reserve space for Elementor form messages (prevents push-down) [/I]/
.elementor-form .elementor-message,
.elementor-form .elementor-field-group .elementor-field-subgroup,
.elementor-form .elementor-field-group .elementor-field-textual + .elementor-field-textual {
  min-height: 24px;
}
/[I] Stabilize textarea sizing [/I]/
.elementor-form textarea.elementor-field-textual {
  min-height: 140px; /[I] keep your fixed height idea, but use min-height [/I]/
  resize: vertical;
  line-height: 1.4;
}
/[I] Reduce font-swap reflow impact [/I]/
body { font-size-adjust: 0.5; } /[I] tweak per font; test carefully [/I]/

If you’re using reCAPTCHA/hCaptcha, also reserve its space (inspect the widget container and set a fixed/min-height on it). And if Elementor is loading fonts late, try hosting fonts locally (Elementor → Settings → Advanced) or use a performance plugin that can optimize font loading (Autoptimize + local fonts, or Perfmatters). Test on mobile and desktop, since CLS often differs by breakpoint.