New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When removing form input help text, it's causing elements underneath to twitch/flicker #8831

Closed
jmca opened this Issue Jan 5, 2018 · 10 comments

Comments

Projects
None yet
6 participants
@jmca

jmca commented Jan 5, 2018

Version

3.1.0

Environment

Chrome, Safari

Reproduction link

https://codesandbox.io/s/40k3zv92q7

Steps to reproduce

  • Create three vertical form items with the top element as an Input.
  • Add help text to that Input
  • Toggle that input's help text (using state in this case)

What is expected?

The form item should be the same height regardless of help text.

What is actually happening?

When the help text is removed, the form item's height is not held causing all elements below to shift up for a quick seconds cause a perceived twitch/flicker.

@dengfuping

This comment has been minimized.

Contributor

dengfuping commented Jan 7, 2018

@jmca In fact, when the help text is just one line, the space between two form items is enough for the help text. For the help text with multiple lines, it's unavoidable. Further to the demo in the docs.

@jmca

This comment has been minimized.

jmca commented Jan 7, 2018

I'm not sure why it doesn't do it on the demo page. Maybe it's a different version or custom style is applied. Check out the sandbox link (https://codesandbox.io/s/40k3zv92q7), the twitching is apparent. I think it has something to do with how the animation transition is collapsing the text.

@benjycui

This comment has been minimized.

Contributor

benjycui commented Jan 13, 2018

The CSS animation is too complicated, could you help @afc163

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 14, 2018

@jljsj33 Take a look, introduced in 22ef7d1

@jljsj33

This comment has been minimized.

Member

jljsj33 commented Mar 14, 2018

中文描述下。。。。

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 14, 2018

你看上面的 codepen 链接,helper 消息消失的时候下面的输入框会抖一下。

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 14, 2018

我看了下是因为 22ef7d1 里引入的动画导致的。

@jljsj33

This comment has been minimized.

Member

jljsj33 commented Mar 14, 2018

感觉是时间没同步。。。

@jljsj33

This comment has been minimized.

Member

jljsj33 commented Mar 14, 2018

我看下。。。

@jljsj33

This comment has been minimized.

Member

jljsj33 commented Mar 14, 2018

22ef7d1#diff-51de536edf29809d26f0ccfab96f81fcR72

CSS 不是同一个时间轴的问题。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment