javascript - $ ('#id' ).css() 无法在 Safari 上运行

Question

that.iconDisplayPercent = that.scrollPosition / that.headerHeight
$('#icon').css({'opacity':that.iconDisplayPercent})
that.iconRotatePercent = Math.min(1,that.scrollPosition/that.headerHeight)       
$('#icon').css({'transform':'rotate('+that.iconRotatePercent*180+'deg)'})

原始 CSS 类:

.icon{
  position: fixed;
  right: 25px;
  color: white;
  top:20px;
  visibility: visible;
  opacity: 0;
  font-size: x-large;
}

以上代码(只有一部分)不能在 Safari 上运行，但在 Chrome 上是完美的，有人知道这里发生了什么吗？

这是我们网站的一个功能，图标会随着屏幕滚动而旋转，所以我计算了一个百分比来传递不透明度和旋转度，但是Safari似乎无法添加这个内联CSS动态，但是Chrome可以.大声笑，完全糊涂了。

注意:我这样定义这个元素: i#icon.fa.fa-chevron-circle-up(class='icon')所以“icon”既是 id 又是类名，在初始状态下，它遵循 .icon{} 类，但我得到 #icon 添加内联 css 以覆盖原始 css。

Answer 1

尝试使用 .代替#

.icon{
  position: fixed;
  right: 25px;
  color: white;
  top:20px;
  visibility: visible;
  opacity: 0;
  font-size: x-large;
}

因为您在代码中使用了 $("#icon") 。所以，首先要明确 icon 是 HTML 元素的 'id' 属性或 'class' 属性