search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.49k stars 1.22k forks source link

Toast: An unexpected displacement occurs at the end of the animation #5697

Open dreamerblue opened 6 months ago

dreamerblue commented 6 months ago

Describe the bug

After removing an element from container and the animation ended, all other remaining animated elements are slightly transient about 1-2 pixels suddenly. This makes the component look like it has a tiny bug.

Reproducer

https://stackblitz.com/edit/vidpqd?file=src%2FApp.vue

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

macOS 14.4.1, Chrome 124.0.6367.119 arm64

Steps to reproduce the behavior

You can use the Toast Sticky StackBlitz (forked from official docs) to test.

  1. Click "Sticky" button to generate at least 3 toasts.
  2. Click close button of the first toast, then see the remaining toast elements. After the animation ended, all elements below the removed one will move up about 1-2 pixels suddenly.

Expected behavior

No unexpected displacement.

KumJungMin commented 4 months ago

This is caused by the border-width applied to .p-toast-message-content 🥹