固定头部场景下必填textarea字段无法被正确滚动定位，scroll-margin属性无效的问题求助

大家好，我最近碰到个头疼的问题，想请各位大佬帮忙支支招：

我的网站有个固定在顶部的头部导航栏，还有一个表单。表单里有一些必填的<input>输入框和<textarea>文本域。当用户没填这些必填字段就提交表单时，我希望页面能自动滚动到最上方那个未填写的必填字段，让用户一眼就知道哪里需要补填。

因为头部是固定定位的，直接滚动会导致目标字段被导航栏挡住，所以我给<input>标签加了CSS的scroll-margin-top属性，值设成导航栏的高度（50px），这个方法对<input>完全管用！可同样的属性用在<textarea>上却一点效果都没有，提交表单后，文本域还是会被固定头部挡住，没法正确显示在视野里。

下面是我目前的CSS代码：

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: yellow;
    top: 0;
}

input { /* 这个有效 */
  scroll-margin-top: 50px;
}

textarea { /* 完全无效 */
  scroll-margin-top: 50px;
}

有没有大佬清楚为什么scroll-margin-top对<textarea>不起作用？或者有没有其他办法能解决这个滚动定位的问题呀？

备注：内容来源于stack exchange，提问作者plsssineedheeeelp