我一直在尝试为我遇到的这个错误找到解决方案,其中 textarea 中的文本在加载时不显示,它只在单击或悬停时显示。它在 Chrome 中运行良好。
问题截屏https://share.getcloudapp.com/P8uynjxx
在这里查看小提琴https://jsfiddle.net/dqLrtn9x/
HTML
<textarea class="header">Pure CSS Gradient Text Animation Effect</textarea>
CSS
.header {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 6rem;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 10s infinite linear;
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
有谁知道为什么会发生这种情况以及如何解决它?任何帮助或方向将不胜感激
从此codepen复制以显示textarea问题https://codepen.io/caseycallow/pen/yMNqPY