Open
Bug 1417236
Opened 7 years ago
Updated 2 years ago
No opacity animation for text with background-clip:text
Categories
(Core :: Layout: Text and Fonts, defect, P3)
Tracking
()
UNCONFIRMED
People
(Reporter: pygy79, Unassigned)
References
(Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346
Steps to reproduce:
Given this simple animation:
@keyframes intro {
from {opacity: 0;}
to {opacity: 100;}
}
Give an element the following style:
h1 {
animation: intro 2s;
background-image: linear-gradient(10deg, red, blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
Actual results:
The text appears abruptly after two seconds
Expected results:
A gradual fade in.
Live here:
https://flems.io/#0=N4IgtglgJlA2CmIBcBmAHAOhQJgDQgGd4EBjAF3imRAxIIJHwDMIEGkBtUAOwEMxESGgAsyYWIxAkA9twpzqAHmEBGAAQlYvegF4A5gCdeUCPDkA+ABIQAhIoD0q8wB1uylVdsOnIAL64efkEaOgZ8GTkzMmo1AAEAa3gATyYjAQI1CDkDaTVgVzU1VOkwPOkAB14SCDIkpDUABl8CtTJc4Aqqmrq1FQam12buV1U8lt5uCDBeMghZeqyyHLVsAgBuFqZZMgBaAggAL3h6vvgwDe4h1wxDY1M5Me5CgCMq+MNpAFduKB2p3j0xzUsCy8F4Bh2txMUQAFH0oPA9Lg1AZKMjnrBPvAAJQXQo7ADu8Ge8RqO1eJHeOW+v00EHK9QoAA8yHi1BSqV8fjs6QzWvAWWzCcTSbtmbsWLBYDzpLBpAZGUZuARKqi5BdfH4ALr4EHceLsLggPgCaiQMjCAysSSfAwSISiMjlAhIez2b7ld60Er2c2W1ixFQYIMAVl9NX9sAwACswiBauVgrHtb4gA
|
Reporter | |
Comment 1•7 years ago
|
||
My bad the background-image is a red herring. Replace that line with `background-color: green;` and the bug is still present:
https://flems.io/#0=N4IgtglgJlA2CmIBcBmAHAOhQJgDQgGd4EBjAF3imRAxIIJHwDMIEGkBtUAOwEMxESGgAsyYWIxAkA9twpzqAHmEBGAAQlYvegF4A5gCdeUCPDkA+ABIQAhIoD0q8wB1uylVdsOnIAL64efkEaOgZ8GTkzMmo1AAEAa3gATyYjAQI1CDkDaTVgVzU1VOkwPOkAB14SCDIkpDUABl8CtTJc4Aqqmrq1FQam12buV1U8lt5uCDBeMghZeqyyHLVsAgBuFqZZMgBaAggAL3h6vvgwDe4h1wxDY1M5Me5CgCMq+MNpAFduKB2ZWGkBnqhngZguhR2AHd4M94jUdq8SO8ct9fpoIOV6hQAB5kcFqRHIr4-P6wDFY+C4-FQmFw3Y43YsWCwP7SAFA1pGbgESoGKIXXx+AC6+DJ3Hi7C4ID4AmokDIwgMrEknwMEiEojI5QISHs9m+5XetBK9nlitYsRUGCtAFZTTVzbAMAArMIgWrlYKu4W+IA
|
|
Reporter | |
Updated•7 years ago
|
Summary: No opacity animation for text with background-clip:text; and an image as bg → No opacity animation for text with background-clip:text
|
||
Updated•7 years ago
|
Component: Untriaged → Layout: Text
Product: Firefox → Core
|
|
Reporter | |
Comment 2•7 years ago
|
||
Even if you set the opacity manually in JS, there are problem when the opacity increases, unless you also modify the content of the element whose opacity is diminishing:
https://flems.io/#0=N4IgtglgJlA2CmIBcBmAHAOhQJgDQgGd4EBjAF3imRAwAsyxYR8AzCBA5AbVADsBDMIiQ16jZiBIB7XhVnUAPATIBPBAD4AOr220AjAAJg2gwf68IYfmQgykBiLIBOUg9gIBuEwZYyyAWgIIAC94ez0ABngwL15TACN+EgBrAHMXAFdeKH9pWCkne3T4eF5Y038Ad3h45IgAxJT0qSycklgIAAd7CgAPMnKDRrTM7NyO7oM+ge8qmrqA6f82WFhcqXzCqadzAk7+J1KZ3gBfbW0FAHplNXgtHV4FfQcoAF5aCHUACQgAQiv9PcnoZoO8pN8pP9LoDzo8CCQnF0yPdtAgyA4DK8DBFtCwsuRbHFzJZrPAABQASiM3mkvGUBjiWMiEQM-gMZIgBgApG4IhEKd4PhgbggMFJ9iR6ipMQYALLWWgYfjxAhk3gUy7MwVSYWqUXipJSmXysiK5Wq9WavneCAsdlxdTYqlC6YAYT8RxlmhAP1+3ptdrVBgUToMtB1bo9si9Psh-riDgA1K89N5DgBHDLwZQAQQsVhsMgAYjshGTiQX4ALTtoK6TKbCrvDEZ1kSATgBdE5AA
|
|
Reporter | |
Comment 3•7 years ago
|
||
> when the opacity increases
I meant decrease, sorry
|
|
Reporter | |
Comment 4•7 years ago
|
||
Aaargh... confused :-/
"when the opacity increases"/"the element whose opacity is _increasing_"
|
||
Updated•6 years ago
|
Priority: -- → P3
|
|
Reporter | |
Comment 5•5 years ago
|
||
This works nowadays, the animation is smooth.
There are still differences in how the opacity is computed, but I'll open a different issue, this can be closed as "FIXED".
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•