HTML textarea background jumping around in chrome on focus

Question

I'm developing a homepage to a small org right now and I got a problem with my page in chrome. (I do not see the same behavior in other browsers.)

The code looks like this:

<form action="add.php" method="post" enctype="multipart/form-data">
    <label>Test:</label><br>
    <input name="title" type="text"><br>
    <label>Test:</label><br>
    <textarea name="text" type="text"></textarea><br>
    <label>Test:</label><br>
    <input name="date" type="text"><br>
    <label>Test:</label><br>
    <input type="file" style="display:none" name="picture" id="picture">
    <br><label for="picture" class="buttonlookalike">Test</label><br>
    <br>
    <button>Test</button>
</form>

The first time I press on the textarea, after refreshing the page, the background jumps around for about 1 second and then return to the position. Here is a link to a video to show the problem. (The video shows how it looks for the user and it's about 7 seconds long.)

A youtube video of the problem

I do not have any javascript which acts on the textarea or the form. I have a CSS which change the color and size of objects, which includes the textarea.

Update 1

Here is my CSS:

input, textarea {
  max-width:100%;
  width: 500px;
}

textarea {
  height: 100px;
  background-color: red;
}

Update 2

I found out that this behavior only appears if you have Grammarly installed in your chrome. (If I deactivate it for my page the problem goes away.)

Edit your question and Show your CSS – Martin Aug 29 '18 at 11:58 — Martin, Aug 29 '18 at 11:58
try to delete `type="text"` from the textarea. – ThS Aug 29 '18 at 12:05 — ThS, Aug 29 '18 at 12:05
I did delete the `type="text"` but it made no difference. – Erik Dahlen Aug 29 '18 at 12:08 — Erik Dahlen, Aug 29 '18 at 12:08

score 1 · Answer 1 · edited Oct 29 '18 at 23:29

1

This was already answered here: How to stop extensions/add ons like grammarly on contenteditable editors.

To fix the Gramarly you can add atribute data-gramm_editor="false" on the < textarea> element.

edited Oct 29 '18 at 23:29

Wreigh

3,215
16
37

answered Oct 29 '18 at 20:46

ShyFlax

11
2

Svetlana Razheva · Answer 2 · 2018-08-29T15:14:38.660

0

Try to remove height: 100px; and set textarea height through row attribute.
I discovered that such behavior caused one of my chrome extension. In my case it was Grammarly.

edited Aug 29 '18 at 15:14

answered Aug 29 '18 at 13:41

Svetlana Razheva

1
2

If I change from height=100px and use rows=5 I get the same problem. But if remove them totally I do not get the problem, but I want a bigger textarea. – Erik Dahlen Aug 30 '18 at 06:56

HTML textarea background jumping around in chrome on focus

2 Answers2