Placeholder component wave animation not working in Edge

[StepanMynarik]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Hi,

I'm using Bootstrap 5.2.3 in my Vite project. Installed based on Vite Getting started guide from the docs approximately a year ago.

Everything has been working great so far, except for the placeholder-wave animation.

I noticed that the mask attributes located in the placeholder-wave class have -webkit prefixed variants on the docs site where the animation works for me in the same browser, but are missing on my site.

As soon as I add the prefixed variants the animation starts working.

Any idea what might be wrong? Why are these prefixes not added to the bootstrap final css on my site?
It's like I'm not getting Autoprefixer sanitized Bootstrap css on my website. But I thought Bootstrap.scss I'm referencing from the Bootstrap package is already supposed to be sanitized?

Reduced test cases

v5 template:

<div class="container py-5">
  <h1 class="h2">Bootstrap v5 Bug Report</h1>
  <p class="placeholder-wave">
    <span class="placeholder col-12"></span>
  </p>
</div>

Here it works so I'm not sure what I'm doing wrong on my site. Followed the Vite Getting started guide to bit.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.2.3

[ffoodd]

I think you need Autoprefixer.

We use it under the hood (through PostCSS) to keep vendor prefixes up-to-date based on supported browsers (defined in .browserslistrc).

[StepanMynarik]

Oooh... I thought it's somehow being used by Bootstrap npm package to postprocess bootstrap code so I don't have to integrate it (autoprefixer) at all.

So it's not like there is a bug in Bootstrap and it's just problem on my end by not using Autoprefixer? Hence all Bootstrap code is without any vendor prefixes on my end?

EDIT: I understand bootstrap.css is already prefixed most likely, it's just that I'm using bootstrap scss code directly. And I thought that this is prefixed "by you guys" also.
I also checked Bootstrap npm package dependencies now and Autoprefixer is not there. So it makes sense. Vendor prefixing is left to the end user I presume?

[ffoodd]

Yeah that's right: we cannot assume our end users' browser support. Some of them might not need prefixing at all.

Our docs might be too light on the topic, but it's mentioned in Browser and devices docs page and Optimize docs page.

That's too light I guess – maybe something to consider in #38538, @mdo ?

[StepanMynarik]

With Vite I just added the following into the vite.config.ts and it works now.

  css: {
    postcss: {
      plugins: [autoprefixer()],
    },
  },

[mdo]

I haven't seen too many issues on the missing Autoprefixer, let's leave things as they are unless there's a recommendation. Happy to accept new PRs.