Textarea box moving on click on initial page load

Question

I have a textarea box that moves on initial click on page load. This is odd and seems a bit buggy, I do not even know where to start debugging.

Has anyone experienced this before?

Here is an image. The white box goes back to the textarea immediately and the the textarea is fine. Its only on initial load on initial click.

Here is my html

  

 .textarea {
      display: block;
      height: 100px;
      width: 100%;
      font-size: 24px;
    } 


.container {
  width: 100%;
  padding-top: 50px;
  text-align: center;
}

.title {
  color: #fdfdfd;
  font-size: 55px;
  margin-top: 50px;
  text-align: center;
  margin-bottom: 30px;
}

.label {
  color: seagreen;
  font-size: 19px;
}

.input {
  width: 100%;
  height: 45px;
  font-size: 24px;
  line-height: 45px;
}

.form-group {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}

.form {
  width: 500px;
  margin: 0 auto;
}

.submit {
  font-family: Chalk-c1;
  width: 300px;
  height: 43px;
  font-size: 24px;
  color: #fdfdfd;
  background-color: rebeccapurple;
  border: none;
  border-radius: 4%;
  cursor: pointer;
}

.textarea {
  display: block;
  height: 100px;
  width: 100%;
  font-size: 24px;
}

html {
  background-color: #111;
  font-family: Chalk-c1;
  color: #fdfdfd;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="title">Contact</div>
  <div class="form">
    <div class="form-group">
      <label for="name" class="label">Name</label><br>
      <input type="text" class="input" id="name" placeholder="John Doe">
    </div>
    <div class="form-group">
      <label for="email" class="label">Email</label><br>
      <input type="text" class="input" id="email" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="message" class="label">Message</label>
      <textarea id="message" class="textarea" placeholder="How can we help you ... ?"></textarea>
    </div>
  </div>
  <button class="submit">Send Message</button>
</div>

Answer 1

I think this is because of the Grammarly plugin. Once I had this kind of issue but when I turned off that plugin, I've solved it. So just check whether this works..

Answer 2

Like the other answers, I think it is because of your 3rd-party plugin.

As a workaround, you could try forcing the position attribute to static since I am guessing that's what's causing it to jump (the plugin may be changing the position) - Without seeing the code I don't know for sure though.