1115623 - [css-pseudo] Animation applied to ::placeholder not working

Status: UNCONFIRMED

(Core :: CSS Transitions and Animations, defect, P5)

Description

[rocky217.r]

User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Steps to reproduce:

Used the below css code, to apply the animation only to the placeholder of a textbox.
::-moz-placeholder { 
    color:blue;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite; 
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}




Actual results:

No animation shown for the placeholder. Note that, if I try to apply the animation on the textbox, instead of only the placeholder, the textbox itself as well as the placeholder blink.


Expected results:

The animation should have been applied to the placeholder. The placeholder should blink.

Comment 1

[Loic]

Could you attach a minimal testcase, please.

Comment 2

[Alice0775 White]

Attachment: Bug1115623.html

Comment 3

[q]

Any ETA on this ?

Comment 4

[Mats Palmgren (inactive)]

Are there any CSS specifications that says animation should be
supported on ::placeholder?
Does any other web browser ship support for this?

::placeholder is absent on CSSPseudoElement:
https://drafts.csswg.org/css-pseudo-4/#CSSPseudoElement-interface
which implies animation shouldn't be supported on it.

If you want this feature implemented in browsers you should
probably file a CSS spec issue first:
https://github.com/w3c/csswg-drafts/issues/new

Comment 5

[lukas.buchs]

Here is a simple example with transition: https://jsfiddle.net/ytmcfqrx/

❌ Transition not working in Firefox 67
✔️ Transition working in Chromium 75
✔️ Transition working in Safari 12