$('#id').css() 不能在 Safari 上运行答案

【问题标题】：$('#id').css() can not work on Safari$('#id').css() 不能在 Safari 上运行
【发布时间】：2017-03-03 09:10:54
【问题描述】：

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') 所以“图标”既是 id 也是类名，在初始状态下，它遵循 .icon{} 类，但我得到 #icon 以添加内联 css 以覆盖原始 css。

【问题讨论】：

在 jquery 中你使用 # 而在 css 中你定义它就像 class .icon.. 请在 css 中更改 #icon
看看这个重复的问题：jquery-style-not-being-applied-in-safari
@MukeshRam 注意：我这样定义这个元素：i#icon.fa.fa-chevron-circle-up(class='icon') 所以'icon'既是id又是类名，在初始状态下，它遵循 .icon{} 类，但我得到 #icon 添加内联 css 以覆盖原始 css。

标签： javascript jquery html css safari

【解决方案1】：

根据您使用的 safari 版本，它可能需要“transform”前缀。如果您曾经使用自动插件来处理前缀，并且当您添加这样的内联代码时，则没有前缀，除非您手动编写它们。

【讨论】：

【解决方案2】：

问题是有时 safari 在我们更改 CSS 时不会重绘页面，所以我们需要强制重绘，你可以这样做：

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

希望对你有帮助！

【讨论】：

【解决方案3】：

尝试使用 .代替#

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

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

【讨论】：

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