I am using antd design in my React App. I have noticed that antd design modal flickers when opened.

Is there a way I can fix this problem?

I am following the instructions from /ponents/modal/

I do not have a codepen for this but I have written all the modals in following way and I am using the css from antd design.

          <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

I am using antd design in my React App. I have noticed that antd design modal flickers when opened.

Is there a way I can fix this problem?

I am following the instructions from https://ant.design/ponents/modal/

I do not have a codepen for this but I have written all the modals in following way and I am using the css from antd design.

          <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

• javascript
• reactjs
• redux
• antd

Share Improve this question Follow asked Aug 21, 2017 at 10:26 FE_AddictFE_Addict 67744 gold badges1111 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Never happened to me. Did you check for any css in developer tools that might be causing this issue? Example, when i was using modals, my background was getting dark. When I checked one of the ant's default class (which was not needed at all. It was a wrapper div which wrapped the actual modal divs) had dark background because of which that was happening. So, either by setting the background: transparent; I could solve that issue. But then i found this:

mask = {false}

This goes into your modal declaration. Something like this:

         <Modal
          visible={visible}
          mask = {false}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >

So, give it a try. This might solve your problem.

One way to solve this issue:

Pass the prop transitionName="" to the ponent that is flickering, which disables the transition on the ponent thus no flickering occurs.

For more on this visit:

https://ant.design/ponents/modal/#How-to-disable-motion