Skip to content
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

fix: confetti overlay #703

Merged
merged 1 commit into from
May 29, 2024
Merged

fix: confetti overlay #703

merged 1 commit into from
May 29, 2024

Conversation

fengstats
Copy link
Collaborator

如图,礼花的位置没有从页面最顶层开始播放

image

出现问题的原因是当前绘制礼花的 canvas 定位是基于 modal-box 层(之前是基于 dialog)导致整体绘制的大小位置发生了变更

image

这是之前的礼花 canvas 位置和大小

image

既然如此,那就尝试将礼花的绘制 canvas 的放到外面

image

很快我们发现了一个新的问题,因为 dialogmodal 类的 z-index 值是 999,所以如果我们的 canvas 不在 modal 内的话,播放礼花就只能在背后显示了,大部分会被 modal-box 实际显示的内容所遮盖

image

image

对此,有两个解决方案

  1. 去掉手动 canvas 绘制,直接使用 confetti 方法播放礼花,配置其参数 z-index 高于 modal
  2. 保持手动 canvas 绘制不变,在 canvas 上配置 z-index 高于 modal

为了不引起其他不必要的问题,这里选择第二种解决方案 😊

@fengstats fengstats merged commit 97af662 into main May 29, 2024
1 check passed
@fengstats fengstats deleted the fix/confetti-position branch November 14, 2024 23:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant