Bug 100588
| Summary: | CSS Counters used in content properties do not update | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Keith Bronstrup <keith> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | bfulgham, karl+webkit |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | http://keith.bronstrup.com/demos/css/css_counters | ||
Keith Bronstrup
Overview:
Once a page has rendered, CSS counters do not update when new elements which increment those counters are added to the page.
Steps to reproduce:
Visit http://keith.bronstrup.com/demos/css/css_counters and view the 2nd demo on that page (entitled "Interactive Counters"). Click the "Click here" text to add additional items to the ordered list.
Actual results:
Item is added to the ordered list. Counter in the text "There are 2 items..." does not update.
Expected results:
Item is added to the ordered list. Counter in the text "There are 2 items..." updates to indicate the number of items now in the list.
Builds/Platforms:
All WebKit builds (Chrome, Safari, iOS browser, Android Browser) I could test on Windows 7, OSX 10.6.8, Android JellyBean, and iOS 5.1.1. Each of these exhibits this behavior. Works as expected in all non-WebKit browsers tested, except IE7 (as expected, since it lacks support for CSS counters).
Additional information:
This page is presently under development (adding a 3rd demo and cleaning up some texts). The text and appearance of this page may change, but the order of the demos will not; the issue will remain in the 2nd demo on the page until it is addressed by the WebKit team.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Keith Bronstrup
Additional experimentation shows that a common WebKit workaround of setting the display property to 'none', then back to it's original value (in this case, 'inline') will force a redraw and the correct count will be displayed. This is a JavaScript solution for a CSS/rendering issue and should not be accepted. This also confirms that the CSS counter, itself, is incrementing, and that the issue is with the element containing the 'content: counter(item);' property not redrawing on its own when it should.
karl
This webcompat bug might be a duplicate of this one.
https://bugs.webkit.org/show_bug.cgi?id=100588
The reduced test case is https://jsfiddle.net/8Lyn03uj/
Brent Fulgham
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.