Question

我现在正在为一个小型组织开发一个主页，但是我的chrome页面出现问题。（我在其他浏览器中看不到相同的行为。）

代码如下：

<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>

当我第一次按下文本区域时，刷新页面后，背景会跳动大约1秒钟，然后返回到该位置。这是显示问题的视频的链接。（视频显示了用户的外观，它长约7秒。）

A youtube video of the problem

我没有任何作用于textarea或表单的javascript。我有一个CSS，它可以更改对象的颜色和大小，其中包括文本区域。

更新1

这是我的CSS：

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

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

更新2

我发现只有在Chrome中安装了Grammarly时，才会出现此行为。（如果我在我的页面上停用它，问题就消失了。）

Answer 1

此问题已在此处得到解答：How to stop extensions/add ons like grammarly on contenteditable editors。

要修复Gramarly，可以在data-gramm_editor="false"元素上添加属性< textarea>。

Answer 2

尝试删除高度：100px；并通过row属性设置textarea高度。
我发现这种行为导致了我的chrome扩展程序之一。就我而言，这是语法。

HTML文字区域背景以镶边形式在焦点上跳跃

2 个答案: