如何让HTML textarea元素的背景图片随内容滚动？

我们在使用HTML的<textarea>元素制作笔记样式时，遇到了背景图的浏览器兼容问题：Chrome中当内容超出文本域限制滚动时，背景图会随内容同步滚动；但在Firefox 112.0.2版本中，内容滚动后背景图固定不动，不会跟随滚动。我们尝试过添加浏览器兼容相关的CSS属性，也排查了多种实现方式，均未解决问题。

效果对比 #

• Chrome：内容超出文本域滚动时，背景图与内容同步滚动
• Firefox 112.0.2：
  • 内容未超出时，背景图显示正常
  • 内容超出滚动后，背景图固定在初始位置，不随内容滚动

当前使用的CSS代码 #

background-image: repeating-linear-gradient(to bottom, transparent, transparent 42px, var(--theme-blue) 45px);
background-attachment: scroll;

内容的提问来源于stack exchange，提问作者Naveen raj