IE浏览器中Ripple波纹效果无法生效问题求助

Got it, let's troubleshoot why your .bh-ripple effect isn't working in IE and fix it up. IE's support for modern CSS has always been spotty, so let's break down the issues in your code and apply targeted fixes:

Key Issues in IE #

First, let's identify which parts of your code IE struggles with:

• IE10 and below don't support pointer-events: none, which would make your pseudo-element block clicks on the underlying element.
• IE10 requires vendor prefixes for transform and transition properties.
• IE10 has trouble with the transparent keyword in radial gradients—explicit rgba(0,0,0,0) works better.
• IE9 doesn't support CSS transitions, gradients, or translate3d at all (we'll cover a fallback for this too).

Fixed CSS Code #

Here's the updated CSS with IE-compatible adjustments, plus comments explaining each change:

/* Base ripple container */
.bh-ripple {
  position: relative;
  overflow: hidden;
  /* Fallback for IE9 (doesn't support translate3d) */
  -ms-transform: translate(0, 0);
  /* Modern browsers + IE11+ */
  transform: translate3d(0, 0, 0);
}

/* Ripple pseudo-element */
.bh-ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* Fix for IE10 (doesn't support pointer-events: none) */
  visibility: hidden;
  /* Use explicit rgba instead of transparent for IE10 gradient compatibility */
  background-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  /* Add -ms- prefix for IE10 transform support */
  -ms-transform: scale(10, 10);
  transform: scale(10, 10);
  opacity: 0;
  /* Add -ms- prefix for IE10 transition support */
  -ms-transition: -ms-transform .5s, opacity 1s;
  transition: transform .5s, opacity 1s;
}

/* Active ripple state (triggered by your JavaScript) */
.bh-ripple.bh-ripple-active:after {
  /* Show the ripple for IE10 */
  visibility: visible;
  /* Block pointer events for IE11+ and modern browsers */
  pointer-events: none;
  -ms-transform: scale(0, 0);
  transform: scale(0, 0);
  opacity: 0.3; /* Adjust this value to tweak ripple visibility */
}

Additional Notes #

1. IE10 Compatibility: The visibility: hidden/visible swap fixes the click-blocking issue since IE10 doesn't recognize pointer-events: none. Your JavaScript should add the .bh-ripple-active class on click, then remove it after the animation finishes (use setTimeout matching your transition duration).
2. IE9 Support: If you need to support IE9, CSS transitions and gradients won't work. You'll need to replace the pseudo-element with a physical child <div> for the ripple, then animate its size and opacity with JavaScript. Use a semi-transparent PNG of a circle as the background for the ripple element to mimic the gradient.
3. Testing: Always test in the specific IE versions you need to support—IE11 behaves closer to modern browsers, but IE10 and below need extra care.

内容的提问来源于stack exchange，提问作者blazehub