Bug 73103 – [REGRESSION] r96393 : Two or more CSS sprites displayed using :after do not work in the same element

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Mike Lawther]

As reported in http://code.google.com/p/chromium/issues/detail?id=104991:

All CSS sprites using :after in the same element use the first sprite.

Repro:
-----
<style>
a[href="/oregon"]:after, a[href="/arkansas"]:after, a[href="/sanjosestate"]:after {
    width: 27px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(http://thumbs.reddit.com/t5_2qm9d_3.png);
    background-position: -9999px -9999px;
    vertical-align: middle;
    margin-right: -3px
    }

a[href="/oregon"]:after {
    content: "";
    background-position: -140px -1400px
    }
a[href="/arkansas"]:after {
    content: "";
    background-position: 0 -350px
    }
a[href="/sanjosestate"]:after {
    content: "";
    background-position: -210px -70px
    }
<style>
<p>In Chrome 16+, if two or more sprites are in the same element, the first takes the place of all the following ones. For example, <a href="/oregon" rel="nofollow"></a>, <a href="/arkansas" rel="nofollow"></a>, and <a href="/sanjosestate" rel="nofollow"></a> all appear as Oregon to me.</p>
-----

Clicky here: http://jsfiddle.net/B3aZz/3/

Browsers tested (MacOS 10.6):
WebKit r96392: OK
WebKit r96393: BAD
WebKit Nightly r101141: BAD
Firefox 8.0: OK

[Philippe Wittenbergh]

That sounds fairly similar to bug 71621

[Antti Koivisto]

Sounds like style sharing rules need some tightening for :before and :after.

[John Bauman]

*** Bug 85168 has been marked as a duplicate of this bug. ***

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.