1190200 - CSS transition ignores max/min dimensions

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[u482975]

Attachment: transition.html

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150729004002

Steps to reproduce:

When defining a transition on a width/height property of an element that also has a max or min defined for that same value. The transition will always target the raw style value of the width/height property instead of the computed one.

To reproduce:
- Open the transition.html attachment.
- Hover over the "real" and "expectation" elements.
- Notice difference in transition even though the computed target width and transition properties are the same.

Expectation:
- Both transitions should look identical


Here it is specified that the "end value" of the transition is defined by the computed style:
http://www.w3.org/TR/css3-transitions/#end-value
http://www.w3.org/TR/css3-transitions/#style-change-event


(I filled in the version number of Firefox. Don't know if that is correct?)

Comment 1

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

This is the expected behavior.  I see the same in Chrome.  And I don't think we can change something this fundamental about transitions given that they're widely used on the Web.

https://drafts.csswg.org/css-transitions/#starting says that transitions operate on computed values

https://drafts.csswg.org/css2/visudet.html#min-max-widths says that min/max-width/height modify the used values

used values are a later stage than computed values; see https://drafts.csswg.org/css-cascade/#value-stages

Comment 2

[u482975]

Seems you're right.
I'm not too familiar with the lingo, so I thought the "computed" tab in the Firefox inspector would mean the same.

It's a shame though, because the only effect achieved by this behavior is something which should be left to the transition-timing-function. And I myself find it quite unintuitive.