Стиль jQuery не применяется в Safari

У меня есть абсолютно позиционированный элемент, который я перемещаю с помощью jQuery, используя CSS, правильно 'left'.

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

В Firefox это работает так, как ожидалось. Однако в Safari я вижу стиль, появляющийся в веб-инспекторе под элементом element.style, но стиль не обновляется. Если я отключу (и снова активирую) любые согласованные CSS-правила (даже те, которые не применяются непосредственно к моему div), стиль, применяемый с jQuery, отображается.

Я запускаю Safari 5.0.6 на старом PowerMac, с jQuery 1.7.2.

Ответы

Ответ 1

Я столкнулся с этой проблемой один раз, и я закончил использование addClass и removeClass на родительском контейнере элементов.

попробуйте это

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

если это не сработает, будет работать точно.

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

проблема в том, что когда-то Safari не перерисовывает страницу при изменении CSS, поэтому нам нужно принудительно выполнить перерисовку

Ответ 2

! важно сделать трюк

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

Ответ 3

У меня была аналогичная проблема с реализацией индикатора выполнения видео. Элемент, который я хотел разместить, был внутри DIV с "display: table-caption;" Прочитав комментарий @gaurang171 по элементам td, мне пришлось удалить этот элемент из таблицы div и установить "display: block;"; и позиция элемента обновлена ​​без необходимости для dummyClass. Div с дисплеем: блок внутри заголовка таблицы не работал, он должен был быть вне таблицы в целом.

Ответ 4

Ну, это работает для меня в сафари 5.1.7

В моем опыте, когда .css() терпит неудачу, я пытаюсь использовать .animate() с 0 как время (мгновенное)

Попробуйте что-нибудь подобное и сообщите мне, если это сработало (протестировано в Safari 5.1.7 и работает)

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