Steps to reproduce
This is a weird edge case discovered while demo-ing a possible feature support testing method for animations & transitions. I’m not sure what the specs would say, but Firefox & Chrome behave in the way that’s useful for my use case & Edge doesn’t.
Demo here, with more explanation in the comments/details page:
The purpose was to test for support of interpolating different types of CSS properties by reading back the computed style at a mid-point of a transition. To speed things up, a negative transition-delay is used to jump to the middle of the transition immediately after changing the value.
The first console log reports the computed styles immediately after changing them (and provoking the transition), the second console log is after a 100ms timeout. Although the negative transition-delay should mean that the transition starts partway through, Edge reports the initial values of both properties, without any interpolation. In contrast, Firefox & Chrome report the partially-transitioned values (for the values they do transition, at least). After the timeout, all 3 browsers correctly report a current partially-transitioned value.
I’m assuming that what’s happening is that Edge is waiting until the next animation frame is painted before calculating the current transitioned value. Which is a reasonable performance approach for most use cases, but a problem with this one.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Ibrahim O.”
Changed Assigned To to “Rick J.”