Member Avatar for rubai

Hi all,

I have a contact form. In the message text area the right border is not showing in chrome browser. It is cool in other browsers.
here is the link

Thanks

  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by rubai

Dani AI

Generated

Nice catch by : the slideInLeft animation on the label that wraps the textarea is what triggers the missing right border in Chrome. That class comes from Animate.css v3, and those slide-in effects rely on CSS transforms. Transforms create a new stacking context/layer, and while the parent is animating Chrome’s compositor can momentarily paint 1px child borders oddly at the edge. Moving the animation off the container that also holds the textarea avoids that repaint edge case. (npmjs.com)

Two reliable fixes you can drop in without redesigning the form:

  • Animate a child span (or a sibling) instead of the label that contains the textarea, so the field itself stays static.
<label class="msg">
  <span class="animated slideInLeft">Message</span>
  <textarea></textarea>
</label>
  • If you must keep the animation on the wrapper, isolate the field so it paints on its own layer/stacking context:
/* promotes just the field; remove if it blurs text on some GPUs */
textarea { transform: translateZ(0); }  /* creates stacking context */

/* or hint only while animating, then remove */
.msg:has(.animated) textarea { will-change: transform; }

Transforms create stacking contexts; use will-change sparingly and only while the effect runs. (developer.mozilla.org)

If you just need a quick visual patch that is not affected by the parent’s animation, swap the border for an outline (drawn outside the border box):

textarea {
  border: 0;
  outline: 1px solid #999;
  outline-offset: -1px; /* pulls it in so it looks like a border */
}

Outlines are painted outside the element’s border and don’t affect layout. (developer.mozilla.org)

Finally, after the entrance animation plays, remove the animation classes so no animated state lingers:

document.querySelectorAll('.animated').forEach(el => {
  el.addEventListener('animationend', () => {
    el.classList.remove('animated','slideInLeft');
  });
});

Use the standard animationend event; no vendor prefixes needed today. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for Bob Hensley

Hi all,

I have a contact form. In the message text area the right border is not showing in chrome browser. It is cool in other browsers.
here is the link

Thanks

The issue is stemming from the slideInLeft class on the label housing the textarea. Removing that class actually remedies the issue. Specifically, it's the animation, as removing the -webkit-animation-name property from the class will fix the problem.

It looks like you're using a downloaded animation stylesheet. It may be more worth your time to just apply a patch, instead of trying to locate the root of the issue. One simple patch would be to put the border on the label and remove the border from the textarea. A couple inline styles and you'll be good to go.

Member Avatar for rubai

Thanks Bob :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.