Webkit (Chrome / Safari) не обнаруживает изменения атрибутов - PullRequest
Новая
       2

Webkit (Chrome / Safari) не обнаруживает изменения атрибутов

1 голос
/ 08 июня 2011

Как обычно, я разработал его в Firefox. Обычно это работает без изменений в Chrome / Safari, а также IE8.

Но когда я тестировал на Chrome и Safari, я был удивлен, увидев, что он не работает.

Мой CSS действителен (проверено на w3c). JavaScript (использующий jQuery), кажется, также действителен.

Уязвимые элементы не перерисовываются после изменения значения атрибута с помощью jQuery, поэтому правила CSS для нового значения атрибута не применяются, пока я не захожу в инспектор Chrome и не отменяю / не выбираю их вручную ...

Обновление: у меня больше нет рабочей ссылки для этой проблемы.

Проблема заключалась в том, что Webkit не «перерисовывал» при изменении атрибутов, а только при изменении классов, поэтому блоки CSS с селекторами, такими как div[attr=value], не будут применяться, когда атрибут attr был изменен на value через JavaScript.

Один из способов - использовать классы вместо атрибутов (.className) в селекторах. Выполнение изменения класса после изменения атрибута также может вызвать перерисовку, что также решит проблему.

Этому сообщению более 5 лет, я думаю, что проблема была исправлена ​​в Chrome.

Ответы [ 3 ]

2 голосов
/ 08 июня 2011

Проблемы возникают из-за того, что вы используете атрибуты (атрибут selected в DIV) для контроля состояния ваших изображений; кажется, что движок webkit не обновляет графику, пока что-то не изменится - например, класс или свойство стиля.

В общем, вы должны знать, что использование такого пользовательского атрибута не является лучшей практикой. Вы можете использовать класс, чтобы указать, когда он включен, и .addClass("selected"), .removeClass("selected"), когда это необходимо. Кроме того, вы можете отображать изображения в качестве фонового изображения элемента и управлять им напрямую из CSS с помощью: 

.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }

это просто изменит изображение в соответствии с классом div.item selected.

Для простого обходного пути вы можете добавить внизу вашего обработчика .click что-то вроде $("body").toggleClass("somethingrandom");, но я действительно рекомендую изменить ваш код для работы с CSS, фоновыми изображениями и классами.

1 голос
/ 08 июня 2011

Вам нужно только изменить значение атрибута?Может довольно легко добавить «выбранный» класс к <div class="item" /> вместо этого.Использование этого параметра /, а также целевого атрибута css автоматически обновит отображение изображений.

1 голос
/ 08 июня 2011

Вы уже открыли консоль ошибок в Safari?

В моем я получаю 404 ошибки на двух файлах ... 

/bras/bras/A/3/2/1/bra.png

и 

/bras/bras/A/1/pink/3/bra.png

EDIT:

У вас также есть тег </head> в самом конце документа вместо тега </html>.

...