822621 - CSS3 Transitions: box-shadow does not transition when only one of to/from is 'inset'

Status: NEW

(Core :: CSS Parsing and Computation, defect, P4)

Description

[braden.sim]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Build ID: 20121128204232

Steps to reproduce:

As per title.

<div id="itemid">Hello world</div>

#itemid{
    box-shadow: 5px 5px 10px;
    transition: box-shadow 1s 1s;
}

#itemid:hover{box-shadow: inset 5px 5px 10px;}

Mouseover your #itemid


Actual results:

The box-shadow switches instantly from outset to inset with no transition


Expected results:

Intuitively, and following optical principles, if a transitioned box-shadow is moving from outset to inset the following should happen

-the box-shadow numeric values [x-offset,y-offset,blur] ALL smoothly transition to 0
-the inset keyword is applied
-the values transition to their new values

A common use for box-shadow inset is (and will be) to create a natural button-depression effect. The effect is not so compelling without transition.

Note that making this change will obviously still allow an instant inset transition if required, and is unlikely to cause compatibility issues.

Note on transition modelling: optical principles suggest that the 'blur radius' value ONLY should be used in the easing equation to determine the point where all numeric values are 0 and the inset keyword may be flipped. That is, blur should be smoothly tweened down to 0 then back to its new value. The offset transitions should be linked so that they reach 0 at exactly the same point in time, regardless of how the easing equation would tween them.

Comment 2

[Jean-Yves Perrier [:teoli]]

I think that Fx behavior is correct per the spec (CSS Border & Backgrounds Level 3, currently a Candidate Recommendation):

Animatable: yes, except between inner and outer shadows

So no transition should be done between the two states (not even if the other values are not the same).

(I've edited the doc on MDN with this information: https://developer.mozilla.org/en-US/docs/CSS/box-shadow )

Comment 3

[Mardeg]

Attachment: Testcase: Hello world (transition) should match the behaviour of Workaround (animation) when holding down mouseclick or touchscreen tapping for a second

Instead it currently matches the no-delay behaviour of Lorum ipsum (nothing)

Comment 4

[Mardeg]

(In reply to Jean-Yves Perrier [:teoli] from comment #2)
> I think that Fx behavior is correct per the spec (CSS Border & Backgrounds
> Level 3, currently a Candidate Recommendation):
> 
> Animatable: yes, except between inner and outer shadows

Sorry, I didn't see this before attaching the testcase, and I agree, so I guess the CSS animation workaround I included in it is the only method.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'd actually like to leave this open; it's a valid feature request.

We had some discussion of this in the working group, and for some reason during that discusion I wasn't able to work out he obvious solution.

In particular, the animation should work if we:
 * consider box-shadow to always be generated by a light source at infinite distance, with normal shadows generated having the shadowed box at height 1 and inset shadows having the height at -1
 * represent any needed position changes as movement (according to the timing function) of the light source (that is, pretending for now that it's not at infinite distance, except that it is since all sides of the box shadow the same way)
 * represent any transitions between normal and inset shadows as movement (according to the timing function) of the height of the shadowed box between 1 and -1.