Unusual WebKit bug with CSS selector
Many webmasters use css selectors like [href ^ = ”http: // somedomain”] to style links, so links to a specific address are rendered differently without using classes.
In one admin panel I used such a selector to give the link icon depending on the url. However, in my Google Chrome 17 I ran into a bug that the icons for all links are the same. In all other browsers (including IE8 and Safari 5.1), everything is fine. Below is a screenshot with a simple example.
For simplicity of example, I removed everything superfluous from the code.
Check in your browser here .
As you can see from the example, for a pseudo-element, we assign a different color depending on the contents of the href attribute (links to edit, delete). Having tinkered with the code, I noticed that this bug in Chrome does not crawl out everywhere. As a result, I found out that for fixing it’s enough that a “different” style is applied to the links. I write different in quotation marks specially.
For example, just add this line:
What to write in this style does not change the essence, for example, you can write like that and it will work too.
The result is here .
The bug was checked in versions 16 and 17.
UPD 1: Just discovered that even a non-existent css style is enough for a fix.
Instead of anytag, you can write anything, any existing or nonexistent tag. An example .
UPD 2: Checked in older versions. The bug appeared only from version 16, i.e. webkit 535.7 . As the comments say , for Safari 5.2 beta the bug is relevant.
UPD 3: https://bugs.webkit.org/show_bug.cgi?id=79774
UPD 4: Starting with Google Chrome 24, the bug is fixed.
In one admin panel I used such a selector to give the link icon depending on the url. However, in my Google Chrome 17 I ran into a bug that the icons for all links are the same. In all other browsers (including IE8 and Safari 5.1), everything is fine. Below is a screenshot with a simple example.
For simplicity of example, I removed everything superfluous from the code.
Check in your browser here .
As you can see from the example, for a pseudo-element, we assign a different color depending on the contents of the href attribute (links to edit, delete). Having tinkered with the code, I noticed that this bug in Chrome does not crawl out everywhere. As a result, I found out that for fixing it’s enough that a “different” style is applied to the links. I write different in quotation marks specially.
For example, just add this line:
a + a {font-weight:normal;}
What to write in this style does not change the essence, for example, you can write like that and it will work too.
a + a {outline:none;}
The result is here .
The bug was checked in versions 16 and 17.
UPD 1: Just discovered that even a non-existent css style is enough for a fix.
anytag+a{}
Instead of anytag, you can write anything, any existing or nonexistent tag. An example .
UPD 2: Checked in older versions. The bug appeared only from version 16, i.e. webkit 535.7 . As the comments say , for Safari 5.2 beta the bug is relevant.
UPD 3: https://bugs.webkit.org/show_bug.cgi?id=79774
UPD 4: Starting with Google Chrome 24, the bug is fixed.