46041 2010-09-18 14:10:24 -0700 CSS inheritance delayed when transition duration on parent and child elements 2026-01-12 09:02:22 -0800 1 1 1 Unclassified WebKit Animations 528+ (Nightly build) All All NEW InRadar P2 Normal --- 1 s+webkit webkit-unassigned ahmad.saleem792 Alexandre.bonneau cmarrin corsar89 dino emilio graouts iRoyPeleg kizmarh koivisto maggotfish marie.hanotte pikachu17997 scott simon.fraser webkit-bug-importer oldest_to_newest 281178 0 68015 s+webkit 2010-09-18 14:10:24 -0700 Created attachment 68015 Demo of font-size not being inherited until the transition is complete When both a parent and a child element have -webkit-transition-durations for an inherited style property, and the property changes on the parent element, the property does not begin to change on the child element until the transition is complete on the parent. This only appears to happen in some cases Try clicking the outer element in the demo a few times. When it adds and removes a class from the outer element that increases its font-size. When the class is added, the font-size of the inner element does not change until the transition is complete, but when it is removed, the transitions happen simultaneously. If you remove the -webkit-transition-duration from the inner element, the font-size transitions happen simultaneously in both directions. 586852 1 133584 robarnold 2012-03-23 16:26:29 -0700 Created attachment 133584 Test case I also ran across this playing around with background-color 1109078 2 scott 2015-07-13 03:14:54 -0700 This is still an issue almost 5 years later. My main concern with this reported issue is that it is still not seen as a priority and yet there is no CSS workaround for many use cases. 1109111 3 webkit-bug-importer 2015-07-13 09:04:49 -0700 <rdar://problem/21793947> 1264992 4 corsar89 2017-01-09 08:28:25 -0800 Here is another showcase http://codepen.io/schonert/details/ovjhd/ And it is still not fixed for 6 years 1342109 5 Alexandre.bonneau 2017-08-24 11:57:25 -0700 Perhaps this is related ; you can clearly see the faulty behavior on this live example : https://codepen.io/AnotherLinuxUser/pen/ZJRNWP?editors=1100 Is there any way this gets more traction after 7 years? 1342119 6 Alexandre.bonneau 2017-08-24 12:09:09 -0700 This is the workaround for the problem I posted earlier ; at comment #1 mentioned, you have to just through hoops in order to avoid having a transition on the parent and child at the same time. The workaround : https://codepen.io/AnotherLinuxUser/pen/MvBEzN?editors=1100 The bug still needs fixing though ;) 1971669 8 ahmad.saleem792 2023-08-16 15:53:40 -0700 I am able to reproduce this bug using WebKit ToT (266957@main) using following test case (from Comment 05): https://codepen.io/AnotherLinuxUser/pen/ZJRNWP?editors=1100 ^ If you hover on 'XXX', it will take some time to reflect background update on 'There is a delay here'. WebKit & Chrome Canary 118 both have this issue while Firefox Nightly 118 does not have this issue and reflect update immediately. 1971676 9 scott 2023-08-16 16:00:51 -0700 13 years. Think they going for some sort of bug existence record with this one. 2007527 10 graouts 2024-01-25 04:12:45 -0800 The issue here is that WebKit and Chrome both trigger a _new_ transition for font-size on #inner on each animation frame as the #outer value changes. I will have to check the correct behavior here per spec. 2007528 11 469546 graouts 2024-01-25 04:16:18 -0800 Created attachment 469546 Testcase with logging Attaching a new testcase which logs how transitions are started. It shows three different behaviors: Firefox: single transitionstart event for both #outer and #inner going from 16px to 32px Safari: single transitionstart event for #outer going from 16px to 32px and one transitionstart event for #inner per frame showing how we try to interpolate from the last interpolated value from the parent to the newly interpolated value until the parent's transition completes. Chrome: single transitionstart event for #outer going from 0px to 0px and several, but fewer, transitionstart event for #inner from 0px to 0px. There's clearly a bug in Chrome with getKeyframes() in this instance. 2007555 12 graouts 2024-01-25 07:23:33 -0800 I think the Firefox behavior is correct (on top of being rather clearly what the author would expect). Here's the relevant spec text, from https://drafts.csswg.org/css-transitions-1/#starting: "Likewise, define the after-change style as the computed values of all properties on the element based on the information known at the start of that style change event, but using the computed values of the animation-* properties from the before-change style, excluding any styles from CSS Transitions in the computation, and inheriting from the after-change style of the parent." When the "triggered" CSS class is applied and font-size changes to 2em on the #outer element, I interpret this spec text as having these effects: 1. for #outer this would mean the after-change style is 2em, which computes to 32px 2. for #inner, the after-change style will inherit from the #outer after-change style, and thus be 32px As such both elements should transition together from 16px to 32px. 2093277 13 iRoyPeleg 2025-02-09 02:57:26 -0800 Chrome has recently resolved this issue, chromium bug: https://issues.chromium.org/issues/40337057 As of Today's Chrome Canary, I've verified this issue is indeed resolved. There's a good chance that the chrome fixes could be directly imported, or at least have great inspiration on how to resolve it here as well. 2100998 14 graouts 2025-03-06 08:39:17 -0800 We're now the last browser engine having this issue :( Cc'ing antti who might have ideas here. 68015 2010-09-18 14:10:24 -0700 2010-09-18 14:10:24 -0700 Demo of font-size not being inherited until the transition is complete webkit_transition_cascade_lag.html text/html 1037 s+webkit PCFET0NUWVBFIGh0bWw+Cgo8aHRtbD4KPGhlYWQ+Cgk8dGl0bGU+SW5oZXJpdGFuY2UgbGFnPC90 aXRsZT4KCTxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIgbWVkaWE9InNjcmVlbiI+CgkJZGl2ewoJCQli b3JkZXI6IDJweCBzb2xpZCBibGFjazsKCQkJcGFkZGluZzogMWVtOwoJCQltYXJnaW46IDFlbTsK CQkJdGV4dC1hbGlnbjogY2VudGVyOwoJCQktd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246IDJz OwoJCX0KCQkjb3V0ZXJ7CgkJCXBvc2l0aW9uOiBhYnNvbHV0ZTsKCQkJcGFkZGluZzogMjBweDsK CQl9CgkJI291dGVyLnRyaWdnZXJlZHsKCQkJZm9udC1zaXplOiAyZW07CgkJfQoJPC9zdHlsZT4K PC9oZWFkPgoKPGJvZHk+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgaWQ9Im91dGVyX3RvZ2dsZSIg Y2hlY2tlZCBvbmNoYW5nZT0iZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ291dGVyJykuc3R5bGUu d2Via2l0VHJhbnNpdGlvbkR1cmF0aW9uID0gdGhpcy5jaGVja2VkID8gJzJzJyA6ICcwJyI+PGxh YmVsIGZvcj0ib3V0ZXJfdG9nZ2xlIj5vdXRlciA8Y29kZT4td2Via2l0LXRyYW5zaXRpb24tZHVy YXRpb248L2NvZGU+PC9sYWJlbD48YnI+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgaWQ9ImlubmVy X3RvZ2dsZSIgY2hlY2tlZCBvbmNoYW5nZT0iZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2lubmVy Jykuc3R5bGUud2Via2l0VHJhbnNpdGlvbkR1cmF0aW9uID0gdGhpcy5jaGVja2VkID8gJzJzJyA6 ICcwJyI+PGxhYmVsIGZvcj0iaW5uZXJfdG9nZ2xlIj5pbm5lciA8Y29kZT4td2Via2l0LXRyYW5z aXRpb24tZHVyYXRpb248L2NvZGU+PC9sYWJlbD4KCjxwPgoJQ2xpY2sgdG8gdG9nZ2xlIHRoZSBv dXRlciA8Y29kZT4mbHQ7ZGl2Jmd0OzwvY29kZT4ncyA8Y29kZT5mb250LXNpemU8L2NvZGU+Lgo8 L3A+Cgo8ZGl2IGlkPSJvdXRlciIgb25jbGljaz0idGhpcy5jbGFzc05hbWUgPSB0aGlzLmNsYXNz TmFtZSA/ICcnIDogJ3RyaWdnZXJlZCciPgoJT3V0ZXIKCTxkaXYgaWQ9ImlubmVyIj5Jbm5lcjwv ZGl2Pgo8L2Rpdj4= 133584 2012-03-23 16:26:29 -0700 2012-03-23 16:26:29 -0700 Test case animation.html text/html 676 robarnold PCFkb2N0eXBlIGh0bWw+CjxzdHlsZT4KKiB7CiAgLXdlYmtpdC10cmFuc2l0aW9uLWR1cmF0aW9u OiAxMDAwbXM7CiAgLW1vei10cmFuc2l0aW9uLWR1cmF0aW9uOiAxMDAwbXM7Cn0KI2NvbnRhaW5l ciB7CiAgd2lkdGg6IDUwcHg7CiAgaGVpZ2h0OiA1MHB4OwogIGJhY2tncm91bmQtY29sb3I6IHJl ZDsKfQoKaW5wdXQgewogIHdpZHRoOiAxMDAlOwp9CgojY29udGFpbmVyLndoZWUgewogIC13ZWJr aXQtdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDQwMHB4KTsKICAtbW96LXRyYW5zZm9ybTogdHJhbnNs YXRlWCg0MDBweCk7CiAgYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47Cn0KCiNoYXRlciB7CiAgcG9z aXRpb246IGFic29sdXRlOwogIHRvcDogNTBweDsKICBsZWZ0OiA1MHB4OwogIHdpZHRoOiA0MDBw eDsKICBoZWlnaHQ6IDIwMHB4OwogIGJhY2tncm91bmQtY29sb3I6IGluaGVyaXQ7Cn0KCjwvc3R5 bGU+CjxzY3JpcHQ+CmZ1bmN0aW9uIG9oYWkoZWxlbSkgewogIGVsZW0ucGFyZW50RWxlbWVudC5w YXJlbnRFbGVtZW50LmNsYXNzTGlzdC50b2dnbGUoJ3doZWUnKTsKfQoKPC9zY3JpcHQ+CjxkaXYg aWQ9ImNvbnRhaW5lciI+CjxkaXYgaWQ9ImhhdGVyIj4KPGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFs dWU9IkhlbGxvIiBvbmNsaWNrPSJvaGFpKHRoaXMpOyIvPgo8L2Rpdj4KPC9kaXY+Cg== 469546 2024-01-25 04:16:18 -0800 2024-01-25 04:16:18 -0800 Testcase with logging bug-46041.html text/html 899 graouts PCFET0NUWVBFIGh0bWw+Cgo8aHRtbD4KPGhlYWQ+Cgk8dGl0bGU+SW5oZXJpdGFuY2UgbGFnPC90 aXRsZT4KCTxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIgbWVkaWE9InNjcmVlbiI+CgkJZGl2ewoJCQli b3JkZXI6IDJweCBzb2xpZCBibGFjazsKCQkJcGFkZGluZzogMWVtOwoJCQltYXJnaW46IDFlbTsK CQkJdGV4dC1hbGlnbjogY2VudGVyOwoJCQl0cmFuc2l0aW9uOiBmb250LXNpemUgMnM7CgkJfQoJ CSNvdXRlcnsKCQkJcG9zaXRpb246IGFic29sdXRlOwoJCQlwYWRkaW5nOiAyMHB4OwoJCX0KCQkj b3V0ZXIudHJpZ2dlcmVkewoJCQlmb250LXNpemU6IDJlbTsKCQl9Cgk8L3N0eWxlPgo8L2hlYWQ+ Cgo8Ym9keT4KCjxwPgoJQ2xpY2sgdG8gdG9nZ2xlIHRoZSBvdXRlciA8Y29kZT4mbHQ7ZGl2Jmd0 OzwvY29kZT4ncyA8Y29kZT5mb250LXNpemU8L2NvZGU+Lgo8L3A+Cgo8ZGl2IGlkPSJvdXRlciIg b25jbGljaz0idGhpcy5jbGFzc05hbWUgPSB0aGlzLmNsYXNzTmFtZSA/ICcnIDogJ3RyaWdnZXJl ZCciPgoJT3V0ZXIKCTxkaXYgaWQ9ImlubmVyIj5Jbm5lcjwvZGl2Pgo8L2Rpdj4KPHNjcmlwdD4K CmRvY3VtZW50LmJvZHkuYWRkRXZlbnRMaXN0ZW5lcigidHJhbnNpdGlvbnN0YXJ0IiwgZXZlbnQg PT4gewogICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0OwogICAgY29uc3Qga2V5ZnJhbWVz ID0gdGFyZ2V0LmdldEFuaW1hdGlvbnMoKVswXS5lZmZlY3QuZ2V0S2V5ZnJhbWVzKCk7CiAgICBj b25zb2xlLmxvZyhgc3RhcnRlZCB0cmFuc2l0aW9uIG9uICR7dGFyZ2V0LmlkfSBmb3IgJHtldmVu dC5wcm9wZXJ0eU5hbWV9IGFuaW1hdGluZyBmcm9tICR7a2V5ZnJhbWVzWzBdLmZvbnRTaXplfSB0 byAke2tleWZyYW1lc1sxXS5mb250U2l6ZX1gKTsKfSk7Cgo8L3NjcmlwdD4=