Open
Bug 868975
Opened 12 years ago
Updated 2 years ago
CSS transition on :link renders with un-visited styles at the start of the transition, even if the link is actually :visited
Categories
(Core :: CSS Transitions and Animations, defect)
Core
CSS Transitions and Animations
Tracking
()
NEW
People
(Reporter: accounts+bugzilla.mozilla.org, Unassigned)
References
Details
Attachments
(3 files, 1 obsolete file)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
Build ID: 20130430204233
Steps to reproduce:
Given the following HTML:
<a href="//example.com">example.com</a>
Given the following CSS:
a {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
color: #06c;
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover,
a:focus {
border-bottom-color: #06c;
}
a:visited {
color: #613eb0;
}
a:visited:hover,
a:visited:focus {
border-bottom-color: #613eb0;
}
Actual results:
After visiting the target of the anchor the :visited style is applied correctly. Upon hovering over the visited link Firefox first transitions to the blue (declared earlier) and then to the purple (declared last).
Expected results:
Same behavior as seen in Google Chrome. The later declaration has to overwrite the previous one. Additionally the :visited:hover and :visited:focus should not even be necessary for this to work correctly (again, as in Google Chrome).
Reporter | ||
Comment 1•12 years ago
|
||
Oh, forgot to mention. The behavior is consistent along all browsers (not only Google Chrome). I tested it with the latest versions of Internet Explorer, Opera Desktop and even the old Apple Safari for Windows.
Attachment #745839 -
Attachment mime type: text/plain → text/html
Comment 2•12 years ago
|
||
Sounds like a possible issue with the dual visited/unvisited style contexts both transitioning...
Component: Layout → CSS Parsing and Computation
Updated•12 years ago
|
Summary: :hover, :focus, :visited CSS transition → CSS transition on :link styles override :visited styles when the :visited styles wouldn't have a transition
Comment 3•11 years ago
|
||
I can also confirm this bug. You can see it on my webpage (http://niewiarowski.it). Opera, Chrome and the others rendering this correctly, but Fx 22.0a2 (and oldest) - not. Color animating to :link color, and next insantly moves to :visited color.
Updated•11 years ago
|
Flags: in-testsuite-
Flags: in-qa-testsuite-
Flags: in-moztrap-
Comment 4•10 years ago
|
||
I also can confirm this, by this testcase. :visited anchor animates the : link behavior instead of :visited behavior.
Assignee: nobody → utasir
Status: UNCONFIRMED → NEW
Ever confirmed: true
Updated•10 years ago
|
OS: Windows 7 → All
Hardware: x86_64 → All
Version: 21 Branch → Trunk
Updated•10 years ago
|
Assignee: utasir → nobody
Comment 5•10 years ago
|
||
Attachment #8440290 -
Attachment is obsolete: true
I can also confirm this bug (FF 49.0). Test case example:
CSS:
a{
font-size:50px;
color:gray;
font-weight:1000;
transition:color 1s;
}
a:hover{
color:black;
}
a:visited{
color:lightgray;
}
HTML:
<a href="">VISITED LINK</a><br>
<a href="https://google.com/randomtext">LINK NOT VISITED</a>
30.05.2017, still can reproduce this bug. Can I get any report or info, how soon would it be fixed?
Flags: needinfo?(bugs)
Comment 9•7 years ago
|
||
Stylo builds seem a little closer to the desired result, but it still transitions out using the unvisited (blue) style. Adding jryans since he knows how :visited works in Stylo.
Flags: needinfo?(jryans)
Interesting, thanks for pointing me to this bug.
When I initially added :visited support in Stylo, I did some limited testing with transitions and animations, and it appeared at the time that it wasn't expected to work, but perhaps this existing bug led me astray.
I left comments in a few spots related to animations and transitions[1] noting that they don't yet attempt to do anything with visited styles in Stylo.
:birtles, I don't know the animations / transition code paths very well. Does it seem like missing visited data from the paths I commented[1] would cause the behavior we're currently getting under Stylo?
(As with anything :visited related, there's always the privacy aspect to consider. So far, it seems safe to add this support to me, as we can use the same "relevant link" decision making that's used elsewhere. Also, these test cases appear to work in other browsers with similar protections.)
[1]: http://searchfox.org/mozilla-central/search?q=ignores%20visited&case=true&path=
Flags: needinfo?(jryans) → needinfo?(bbirtles)
Comment 11•7 years ago
|
||
(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #10)
> Interesting, thanks for pointing me to this bug.
>
> When I initially added :visited support in Stylo, I did some limited testing
> with transitions and animations, and it appeared at the time that it wasn't
> expected to work, but perhaps this existing bug led me astray.
>
> I left comments in a few spots related to animations and transitions[1]
> noting that they don't yet attempt to do anything with visited styles in
> Stylo.
>
> :birtles, I don't know the animations / transition code paths very well.
> Does it seem like missing visited data from the paths I commented[1] would
> cause the behavior we're currently getting under Stylo?
Sorry for the delay. Yes, that seems likely. Of the four:
a. compute_style_for_animation_step in servo/components/style/animation.rs - Not used in Stylo (Servo only).
b. get_after_change_style in servo/components/style/matching.rs - Used in Stylo for transitions.
c. get_base_style in servo/components/style/matching.rs - Used in Stylo, but only for SMIL and additive animations, I believe.
d. compute_for_declarations in servo/components/style/stylist.rs - Used in Stylo, but only for <canvas>, I believe.
So, of the four (b) is the one that seems to be related. From the visual result, it seems like the before-change style is also wrong, but I haven't debugged this to find out if that's the case or not.
Flags: needinfo?(bbirtles)
Comment 13•4 years ago
|
||
Hi people,
The bug is still in the latest Firefox (Windows 7). Minimal test case:
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-size: 5em;
color: blue;
transition: color .5s;
}
a:visited {
color: purple;
}
a:hover {
color: orange;
}
</style>
</head>
<body>
<a href="https://www.mozilla.org/">test link</a>
</body>
</html>
- Click the link
- Navigate back (so that the link is visited and becomes purple)
- hover the link (it switches to orange)
- unhover it (it switches to blue, stays like this for a small moment, then switches to purple)
Updated•4 years ago
|
Severity: normal → S3
Component: CSS Parsing and Computation → CSS Transitions and Animations
Comment 14•4 years ago
|
||
I can confirm bug still exists (firefox developer edition 83.0b7)
Comment 15•3 years ago
|
||
Still reproducible in 99.0a1 (2022-02-13).
Example production site: https://habr.com/en/post/647897/ (visit link in first paragraph, then hover over it).
Comment 17•3 years ago
|
||
For convenience, here's the testcase from comment 13.
There are some additional testcases on duplicate bug 1757384.
Updated•3 years ago
|
Summary: CSS transition on :link styles override :visited styles when the :visited styles wouldn't have a transition → CSS transition on :link renders with un-visited styles at the start of the transition, even if the link is actually :visited
Comment 18•2 years ago
|
||
Still broken.
(But it's only been 10 years, so what can you expect.)
Comment 19•2 years ago
|
||
Hi people,
Just tested from a recent Fedora, using a recent Firefox. The bug is still there. It seems to be independent of the operating system.
You need to log in
before you can comment on or make changes to this bug.
Description
•