Mac Chrome下面包屑伪元素出现异常残影问题求助

Hey there! Let's tackle that weird red ghosting issue between your second and third breadcrumb sections in Chrome on Mac. First, let's break down why this is happening:

This glitch stems from subpixel rendering precision gaps in Chrome's engine when combining flexbox layout, absolute positioning, and clip-path. When your flex container splits the width between sections, it might create non-integer pixel values. Chrome struggles to align the absolute-positioned pseudo-elements perfectly in this scenario, letting the red background from the third section peek through. The first two sections don't show this because the second section's :after pseudo-element matches its own blue background—any tiny offset is invisible.

Here are three clean, non-hacky fixes that address the root cause:

Fix 1: Enable Hardware Acceleration with GPU Rendering #

Adding a simple transform forces Chrome to use GPU rendering, which handles subpixel alignment far more accurately:

.section {
  flex: 1;
  position: relative;
  height: 100px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0); // Add this line to trigger GPU rendering
  // ... rest of your existing .section styles
}

This is the quickest fix—GPU rendering uses more precise pixel alignment logic that eliminates the ghosting entirely.

Fix 2: Adjust Pseudo-Element Sizing for Full Coverage #

Your current pseudo-element widths and positioning leave a tiny 1px gap that lets the red background bleed through. Fix this by making the :after pseudo-element fully cover the area:

.section {
  // ... existing styles
  &:before {
    content:"";
    background-color: grey;
    -webkit-clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    z-index: 1;
    position: absolute;
    right: -26px;
    top: 0;
    width: 26px; // Increase from 25px to match right offset
    height: 100px;
  }
  &:after {
    content:"";
    background-color:black;
    -webkit-clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    z-index: 2;
    position: absolute;
    right: -26px; // Match :before's right offset
    top: 0;
    width: 26px; // Increase to cover the full area
    height: 100px;
  }
  // ... rest of your existing styles
}

By matching the right offset and width of both pseudo-elements, the :after (which matches the section's background) fully covers any gaps, so the red background can't peek through.

Fix 3: Force Integer Pixel Widths with Flexbox Adjustments #

Change the flex property to prevent non-integer widths, which are the source of the subpixel misalignment:

.section {
  flex: 1 0 auto; // Replace flex:1 with this
  // ... rest of your existing .section styles
}

flex:1 is shorthand for flex:1 1 0%, which allows sections to shrink/stretch to non-integer widths. flex:1 0 auto forces sections to use integer-based widths, eliminating the subpixel rendering issue entirely.

All three fixes avoid the hacky right: -26px adjustment you wanted to skip, and work consistently across Chrome without breaking functionality in Firefox/Safari.

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