Discontinuity between :active and :checked states when an input is activated via a label (causing CSS animation to restart)

NEW
Unassigned

Status

()

Core
CSS Parsing and Computation
4 years ago
4 years ago

People

(Reporter: James Holderness, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (Windows NT 6.0; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140605174243

Steps to reproduce:

* Create a checkbox input element with an associated label element.
* Create a div that is styled to animate when the input is checked or activated.
* Click on the label, holding the mouse button down for a second before releasing it.

JSFiddle example: http://jsfiddle.net/dDJNy/


Actual results:

The animation starts when the LABEL is first clicked, but when the mouse button is released the animation resets and then starts again. It seems there is a discontinuity in the state of the INPUT where it is neither active nor checked.


Expected results:

I would have expected the animation to continue as usual when the mouse button was released. In fact, if you click on the INPUT (the checkbox itself) rather than the LABEL, that's exactly what happens.

That said, I'm not sure this is necessarily a bug. It seems that Chrome has basically the same behaviour (although it has other :active bugs which complicate testing). But the example does work as expected in IE11 (you may have to click a few times to get it to work, since IE also has other :active bugs).
I can reproduce this in Nightly.
33.0a1 (2014-06-10)
Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows Vista → All
Hardware: x86 → All
Summary: Discontinuity between :active and :checked states when an input is activated via a label. → Discontinuity between :active and :checked states when an input is activated via a label (causing CSS animation to restart)
Version: 30 Branch → Trunk
(Reporter)

Comment 2

4 years ago
In case it matters, I should point out that it's not only CSS animations that are affected by this issue. A CSS transition would exhibit the same problem.
You need to log in before you can comment on or make changes to this bug.