Materialize: Transition is missing on text area and some form labels when the they are <unfocused> in 0.100.1

Created on 27 Jul 2017  路  16Comments  路  Source: Dogfalo/materialize

http://materializecss.com/forms.html

I noticed recent updates break things very frequently... Looks like you guys have serious CSS conflict issues.

Most helpful comment

We are constantly fixing bugs on all of our fundamental components. With a large framework, even small tweaks to a component can have a lot of unforeseen consequences. Unfortunately automated testing for visual things like this is very hard to do. We do have a label rework that should make these components more stable in the future.

All 16 comments

I see the transitions (the labels) when I tab through the fields. Can you describe in detail what's broken and how it should be?

@DanielRuf
try clicking in the textarea component and after that clicking elsewhere, that change from active to normal hasn't an appropriate animation, I just tested in chrome latest.

@fega you mean the animated label and color? I still see the animation. Tested on Chrome mobile 58.

Please test it in Firefox and other browsers. This should still work.

@fega you mean the animated label and color? I still see the animation. Tested on Chrome mobile 58.

yep, here I see the issue in both mobile and desktop, you'll see that the text size change properly but the position change in a "pop"

Did you test in Chrome 58? Still not reproducible here.

chrome 60 in desktop, 59 in mobile.

are you sure?, I didn't notice it at the first time :sweat_smile:

I just see some jump in the textarea but it has transition on all properties.

Tested on Chrome 59 on MacOS. But still no issues with the normal inputs.

I'm using Chrome 60 (previously 59) on desktop. @fega described it pretty clearly in his first reply. It's the movement of the label when the input is being unfocused. Just on the official website, you can see a clear jump on the transition comparing let's say forms in input field section at the top of the page and the textarea sections.

If you still can't tell the difference, then maybe never mind? Currently, I'm overriding all labels in the textarea with transition: all .3s, which solves the issue.

I'm just confused why every time an update is pushed, these fundamental components would get broken... It's not like you guys are adding more features to those building blocks or switching to a new style...

We are constantly fixing bugs on all of our fundamental components. With a large framework, even small tweaks to a component can have a lot of unforeseen consequences. Unfortunately automated testing for visual things like this is very hard to do. We do have a label rework that should make these components more stable in the future.

I guess we need some regression testing or similar as part of the CI workflow.

Probably the transition should be on more values, why not use it on all properties?

transition: transform .2s ... should include the transition for the top value and probably some more ;-)

We do need help writing jasmine tests. It's a pretty big priority to expand our tests while we are refactoring our plugins

Fixed in v1-dev by a rework of the helper text system

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ReiiYuki picture ReiiYuki  路  3Comments

PhillippOhlandt picture PhillippOhlandt  路  3Comments

djensen47 picture djensen47  路  3Comments

locomain picture locomain  路  3Comments

lpgeiger picture lpgeiger  路  3Comments