ant-design Blinking Notification prompt when using "App" wrapper

5w9g7ksd 于 3个月前发布在其他

关注(0)|答案(8)|浏览(48)

Reproduction link

Steps to reproduce

Using the "App" wrapper for the Notification prompt according to the documentation, new notification prompt blinks at first render if the count of notification prompt more then 2

What is expected?

Displaying the notification prompt without blinking

What is actually happening?

new notification prompt blinks at first render if the count of notification prompt more then 2
| Environment | Info |
| ------------ | ------------ |
| antd | 5.16.4 |
| React | 18.x |
| System | Window |
| Browser | Chrome |

ant-design

来源：https://github.com/ant-design/ant-design/issues/48608

8条答案

按热度按时间

rlcwz9us1#

Seems to be rendering problem caused by using render function in React 18.

Check the example below, App wrapper works fine.

赞(0）回复(0）举报 3个月前

odopli942#

Happens on react 17.0.2 as well. Noticed this problem after update 5.6.3 -> 5.16.4. Also had to fix styles that were changed for no apparent reason to look like shit. Thank you ant. Gonna downgrade now

赞(0）回复(0）举报 3个月前

snz8szmq3#

same problem with App and notifications

赞(0）回复(0）举报 3个月前

wbrvyc0a4#

confirmed using next js 14 and latest antd 5.17.0,
I tried using:

App.useApp
notification.useNotification
static [deprecated]

all different steps to show notification results in blinking on the second notification

赞(0）回复(0）举报 3个月前

yshpjwxd5#

Still reproduce on version 5.18.0.
For my case, like an temporal option, next row in globals.css file helped me:

.ant-notification-stack > .ant-notification-notice-wrapper {
  transition:
    transform 0.3s,
    backdrop-filter 0s !important;
}

I tested with NextJS 14 + Tailwind + AntDesign 15.18.0.

By default AntDesign are using transition: all 0.3s, backdrop-filter 0s; Looks like removing all is temporal solution if have no time to wait 🤷‍♂️

赞(0）回复(0）举报 3个月前

q0qdq0h26#

It is indeed a bug.

赞(0）回复(0）举报 3个月前

cnwbcb6i7#

Reproduce link: https://stackblitz.com/edit/react-yjeocj?file=demo.tsx,index.tsx

赞(0）回复(0）举报 3个月前

dced5bon8#

Hello @Yukititit. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Yukititit，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

赞(0）回复(0）举报 3个月前

我来回答

ant-design Blinking Notification prompt when using "App" wrapper

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

8条答案

相关问题

热门标签

最新问答