Bug 70595 - CSS transition incorrectly applied to :target on page load
Summary: CSS transition incorrectly applied to :target on page load
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/AndyE/Jx8YB/show/#3
: 81223 184728 (view as bug list)
Depends on:
Reported: 2011-10-21 04:08 PDT by Andy E
Modified: 2022-06-12 15:20 PDT (History)
11 users (show)

See Also:

Safari 15.5 matches other browsers (554.05 KB, image/png)
2022-06-09 09:21 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andy E 2011-10-21 04:08:22 PDT
The test page (http://jsfiddle.net/AndyE/Jx8YB/show/#3) demonstrates the issue more clearly than I can explain it, but here goes.

The following code causes the element matching `:target` to slowly transition the background colour from green to orange:

    span:target { background-color: orange; }

    span {
       display: inline-block; 
       width: 100px; 
       height: 100px;
       -webkit-transition: background-color 800ms ease-in;
       background-color: green; 

The computed `background-color` style should be `orange` from the start, and never `green` as long as the `:target` selector applies.  Opera/Presto follows the same behaviour as WebKit here, but in Firefox/Gecko and IE/Trident the element's background colour is orange.

http://jsfiddle.net/AndyE/Jx8YB/2/show/#3 demonstrates the use-case — highlighting a target element of a fragment identifier for a few seconds and then removing the fragment identifier.
Comment 1 Shane Stephens 2012-06-27 22:01:01 PDT
I was under the impression that the computed background-color should track the observed background-color:

"The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property." (from http://www.w3.org/TR/css3-transitions/#transitions).

Please advise if this is what you are seeing and I will close this bug.
Comment 2 Ahmad Saleem 2022-06-09 09:21:51 PDT
Created attachment 460133 [details]
Safari 15.5 matches other browsers

I am unable to reproduce this bug from both JSFiddle using macOS 15.5 on macOS 12.4 and the colour remains "Green" across all browsers as shown in the picture.

If I am testing incorrectly, please retest accordingly. If it was Web Spec update and Firefox aligned with Webkit behavior then please mark it as "RESOLVED INVALID" or if it got fixed along the lines, then as "RESOLVED CONFIGURATION CHANGED". Thanks!
Comment 3 Sam Sneddon [:gsnedders] 2022-06-10 09:16:10 PDT
*** Bug 184728 has been marked as a duplicate of this bug. ***
Comment 4 Sam Sneddon [:gsnedders] 2022-06-10 09:16:16 PDT
*** Bug 81223 has been marked as a duplicate of this bug. ***
Comment 5 Sam Sneddon [:gsnedders] 2022-06-10 09:17:55 PDT
I'm just going with WFM because I don't know.