Animating transition in container, breaks select position calculation.

[freed00m]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

We are our own custom modals and they are mimicking the ix ones.

However placing , breaks the calculation when there is transition animation effect.

Ofcourse, when we disable the transition it works.

How is the position of the select calculated? If wontfix we might opt into mimicking the ix-select as well.

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.2.1

Code to produce this issue.

Iside a container that arrivers on screen using transition effect.

.dialog {
  animation: fade-in .2s forwards;
}

.fade-out {
    animation: fade-out .2s forwards;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 0 -50px;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    translate: 0 -50px;
  }

  100% {
    opacity: 1;
  }
}

[github-actions[bot]]

🤖 Hello @freed00m

Your issue will be analyzed and is part of our internal workflow. To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-1449