Bug 27009 - Opacity transition ignored when setting inline style to block
Summary: Opacity transition ignored when setting inline style to block
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (PowerPC) OS X 10.5
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-07-06 14:52 PDT by Josh Alley
Modified: 2022-07-22 11:56 PDT (History)
7 users (show)

See Also:


Attachments
Test case (341 bytes, text/html)
2009-07-06 14:52 PDT, Josh Alley
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Josh Alley 2009-07-06 14:52:04 PDT
Created attachment 32329 [details]
Test case

Not entirely sure if this is the correct behavior.  Apologies if this is the case.

Setting an element to display:none and opacity:0, with a transition on opacity, then setting it to display:block and opacity:1 results in the transition being ignored.

Expected behavior would be for the element to have its display changed and the element still fade appropriately.
Comment 1 Josh Alley 2009-07-08 10:50:59 PDT
Update -- all transitions are ignored in this case.

Ex: Set the transition of a div to 'left', change the left value after setting the 'display' style to block.
Comment 2 Simon Fraser (smfr) 2009-08-10 14:16:58 PDT
Yeah, transitions don't run when display is changing from 'none'.
Comment 3 Ahmad Saleem 2022-07-22 11:39:14 PDT
I updated the test case to remove -webkit- prefix to make it easier to test all browsers:

Link - https://jsfiddle.net/nwrt6pg5/show

All browsers are ignoring "transition" and upon clicking - It is immediate 'TADA' across all (Chrome Canary 105, Firefox Nightly 104 and Safari 15.6 on macOS 12.5). I am not sure on what to expect more, is it something aligned with web-spec or something wrong across all browsers.

Just wanted to share updated testing results. Thanks!