27009 2009-07-06 14:52:04 -0700 Opacity transition ignored when setting inline style to block 2022-07-22 11:56:55 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac (PowerPC) OS X 10.5 NEW P2 Minor --- 1 josh webkit-unassigned ahmad.saleem792 ap bfulgham dino graouts rniwa simon.fraser oldest_to_newest 130029 0 32329 josh 2009-07-06 14:52:04 -0700 Created attachment 32329 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. 130460 1 josh 2009-07-08 10:50:59 -0700 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. 138817 2 simon.fraser 2009-08-10 14:16:58 -0700 Yeah, transitions don't run when display is changing from 'none'. 1886046 3 ahmad.saleem792 2022-07-22 11:39:14 -0700 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! 32329 2009-07-06 14:52:04 -0700 2009-07-06 14:52:04 -0700 Test case iphone.html text/html 341 josh PGh0bWw+CjxoZWFkPgo8c3R5bGU+CiN0ZXN0IHsKCS13ZWJraXQtdHJhbnNpdGlvbjogb3BhY2l0 eSAycyBsaW5lYXI7CglvcGFjaXR5OiAwOwoJZGlzcGxheTogbm9uZTsKfQo8L3N0eWxlPgo8c2Ny aXB0PgpmdW5jdGlvbiB0ZXN0ICgpIHsKCXZhciBlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQo J3Rlc3QnKTsKCWUuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7CgllLnN0eWxlLm9wYWNpdHkgPSAx Owp9Cjwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5PgoKPGRpdiBpZD0idGVzdCI+VEFEQSE8L2Rpdj4K CjxhIGhyZWY9ImphdmFzY3JpcHQ6dGVzdCgpIj5DTElDSzwvYT4KCjwvYm9keT4KPC9odG1sPgo=