文字区域行为的首要关注点

Question

在第一次渲染网页时，然后将焦点放在文本区域部分，文本区域空间会跳出框架。如屏幕截图所示，不同浏览器的行为也有所不同：

实际演示

在Chrome上

在Firefox上

仅当页面渲染后第一次进行焦点设置时，此情况才会发生。我发现了一种类似的question，但无法在那里找到答案，因为它只发生一次，所以我的代码中不应有CSS冲突。

Answer 1

好的，我在按@Joel的要求查找CSS时发现了一件事情，因为该应用程序是在Symfony下构建的，并且仅以其概念进行呈现，Symfony首先将一些CSS应用于此。

我创建的文本区域仅具有与宽度相关的CSS，并且正准备为：

<textarea id="create_article_content" name="create_article[content]" class="tinymce"></textarea>

重点是将其转换为：

<textarea id="create_article_content" name="create_article[content]" class="tinymce" data-gramm="true" data-gramm_editor="true" style="background: transparent none repeat scroll 0% 0% !important; z-index: auto; position: relative; line-height: 24px; font-size: 16px; transition: none 0s ease 0s;"></textarea>

基本上，它添加了position: relative，这会导致这种效果，并避免了我需要编写的这种行为

textarea:focus { position: sticky!important; }

我不确定这是否是正确的答案。