0
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)'})

Original CSS class: 

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

Above code (only part of) can not work on Safari, but it is perfect on Chrome, does anyone know what's going on here?

This is a function in our website, the icon will rotate while the screen scrolling, so I calculate a percentage to pass the opacity and rotate degree, but it seems like Safari could not add this inline CSS dynamic, but Chrome is okay. lol, totally confused.

Note: I define this element like this: i#icon.fa.fa-chevron-circle-up(class='icon') so the 'icon' is both id and class name, in the initial state, it follows the .icon{} class, but i get the #icon to add inline css to override original one.

Hongwei
  • 1
  • 1
  • 2
    In jquery you used `#` and in css you define it like class `.icon`.. plz change in css `#icon` – Mukesh Ram Oct 21 '16 at 06:56
  • have a look at this duplicate question: [jquery-style-not-being-applied-in-safari](http://stackoverflow.com/questions/10930010/jquery-style-not-being-applied-in-safari) – Kevin Kloet Oct 21 '16 at 06:58
  • @MukeshRam Note: I define this element like this: i#icon.fa.fa-chevron-circle-up(class='icon') so the 'icon' is both id and class name, in the initial state, it follows the .icon{} class, but i get the #icon to add inline css to override original one. – Hongwei Oct 22 '16 at 07:46

3 Answers3

0

Try using . in place of #

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

As you have used $("#icon") in your code . So , first clarify that icon is either a 'id' attribute or 'class' attribute of HTML element

aks7
  • 431
  • 3
  • 12
  • Hi Amar, thanks for you reply, Note: I define this element like this: i#icon.fa.fa-chevron-circle-up(class='icon') so the 'icon' is both id and class name, in the initial state, it follows the .icon{} class, but i get the #icon to add inline css to override original one. – Hongwei Oct 22 '16 at 07:47
0

The problem is sometime safari doesn't redraw the page when we change CSS so we need to force redrawing, you can do like this:

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');

Hope it helps!

hunter2009
  • 133
  • 3
0

According to version of safari that you use, it may need a prefix for 'transform'. If you used to work with automatic plugin for prefixes and when you adding a inline code like that, there are no prefixes, unless you write them manually.

Gesha
  • 703
  • 4
  • 7