jQuery style not being applied in Safari

Question

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

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


        

Answer 1

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.

Answer 2

!important should do the trick

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

Answer 3

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

Answer 4

Well it works for me in safari 5.1.7

In my experience when .css() fails I try with .animate() with 0 as time (instant)

Try something like this and make me know if it worked (Tested in safari 5.1.7 and worked)

        $(document).ready(function(){
           $("#element").animate({
               left: '+=103px'
           }, 0);
        });