Question

As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.

But when I tested on Chrome and Safari, I was surprised to see that it does not work.

My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.

The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually…

Update: I do not have a working link for this problem anymore.

The problem was that Webkit was not “redrawing” when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.

One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.

This post is more than 5 years old, I believe the problem has been fixed in Chrome now.

Answer 1

The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn’t update the graphics until something actually changes – like a class or a style property.

In general, you should know that using a custom attribute like that isn’t best practice. You can use a class to indicate when it’s on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:

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

this will simply change the image according to the div.item selected class.

For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.