Visited pseudo class... problems in Chrome and Safari

I am making a checklist, that ticks off links that have been clicked. It works by changing the background-position of a gif when the link is ‘visited’. I have also changed the color of the text to check that it works.

Everything works fine in FF, in Chrome and Safari the color will change, but the image will not.

Funny that, cos if I change the position of the background-image in the hover state, it works fine… :rolleyes:

I’ve noticed a similar thing occurring on Matthew James Taylor’s blog:, again works fine in FF, but no joy in Safari or Opera.

My test page can be seen here:

and my css here:

At the moment all the anchors are linked to hash, so clicking one of them essentially makes them all visited.

If anyone could shed any light on this I would be very grateful.


I haven’t had time to test this but how about using the “visited” background for the A tag then setting alternatives for :link :active :hover and :focus?

ul#tick a { background: url(bgvisited.png);}
ul#tick a:link { background: url(bglink.png);}
ul#tick a:hover { background: url(bghover.png);}
ul#tick a:active { background: url(bgactive.png);}
ul#tick a:focus { background: url(bgfocus.png);}

Yeah, I remember that discussion. I still believe the better solution was to have the browser load the visited image whether it was needed or not. This would defeat the privacy invasion while retaining the option for designers. Offending sites would be crippled though by the image request load, but serves them right.

At the very least, background-position should be allowed since it doesn’t incur an image load.

to summarize: as long as you have a :visited in a selector and a background setting in its rules, WebKit will probably catch it and will not allow the use.

Good try but no Safari doesn’t let that work:)

It won’t allow things like this either:

a:visited span {background:url(img.png)}

? try w/o sprites. do you get the same result when you have a different image for :visited?

? i believe it has something to do with WebKit’s calculated values for these:

background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;

try some different -webkit settings for them in your ul#tick li a:visited selector.

Yes noonnope is correct - it’s a security issue.

Mozilla released similar information earlier in the year which caught everyone a bit by surprise (especially as it was released on April the 1st :)) .

We also had a dicsussion in the forums about it.

also found this:

A design issue exists in WebKit’s handling of the CSS :visited pseudo-class. A maliciously crafted website may be able to determine which sites a user has visited. This update limits the ability of web pages to style pages based on whether links are visited.

so it seems it’s a “feature” not a bug.