14

I have an absolutely positioned element that I move with the help of jQuery using the CSS propertly 'left'.

$("#element").css('left', '103px');

In Firefox this works as expected. However in Safari I can see the style appearing in the Web Inspector under element.style, but the style isn't updated. If I disable (and re-enable) any matched CSS-rules (even those not applied directly to my div) the style being applied with jQuery is rendered.

I'm running Safari 5.0.6 on an old PowerMac, with jQuery 1.7.2.

fedmich
  • 5,343
  • 3
  • 37
  • 52
D A
  • 413
  • 1
  • 4
  • 10
  • How about adding a class with left:103px; to you CSS and doing $('emelent').addClass('left_class'); ? Will that make a differance? – Robert Jun 07 '12 at 10:39
  • If it is in the CSS it works, but I want to be able to move the element around with jQuery, but it doesn't work. – D A Jun 07 '12 at 10:49
  • I've traced the problem to a parent element to this one which is absolutely positioned. If I set it to relative positioning it will render the jQuery applied style. – D A Jun 07 '12 at 11:07
  • 1
    Can you post a working web page demonstrating the problem? – RoToRa Jun 26 '12 at 11:28

4 Answers4

13

I faced this problem once and i end up using addClass and removeClass on elements parent container.

try this

$("#element").css('left', '103px').parent().addClass("dummyClass").removeClass("dummyClass");

if that doesn't work follwoing will work for sure.

$("#element").css('left', '103px');
$("body").addClass("dummyClass").removeClass("dummyClass");

the problem is sometime safari doesn't redraw the page when we change CSS so we need to force redrawing

gaurang171
  • 9,032
  • 4
  • 28
  • 30
  • dude, you are a life saver! $("body").addClass("dummyClass").removeClass("dummyClass"); works – AdamV Mar 06 '13 at 17:04
  • 1
    glad it helped you. yes some time immediate parent is not causing problem so you need to move level up. usually body solves the problem. the only case where i see adding class on body doesn't work is when you have element inside td and in that case you need add/remove class or sometime add/remove attribute align on td. – gaurang171 Mar 06 '13 at 18:57
0

!important should do the trick

$("#element").css('left', '103px !important');
user1058322
  • 189
  • 3
  • 13
0

I had a similar problem implementing a video progress bar. The element I wanted to position let was inside a DIV with 'display:table-caption;' After reading @gaurang171 comment on td elements, I ended up having to remove that element from the div table and setting 'display:block;' and the element position updated without the need for the dummyClass. A div with display:block inside the table-caption did not work, it had to be outside of the table altogether.

Sam S
  • 556
  • 1
  • 6
  • 11
0

Safari seems to have problem with repainting elements. Fortunately we can force repaint by adding transform: translateZ(0); to css class. This seems to be fixed on BigSur, but happens on Safari Catalina.

Honzik
  • 53
  • 4