Chrome与Firefox中旋转Div渲染不一致问题及解决问询

I’ve run into similar cross-browser rendering quirks with CSS-transformed pseudo elements before—let’s break down how to fix this. The issue here likely stems from subtle differences in how Chrome and Firefox handle subpixel rendering, transform origin alignment, and anti-aliasing when rotating elements, even with box-sizing: border-box in place.

Here are three reliable fixes you can try:

1. Fine-Tune Transform and Positioning Values #

Small adjustments to your pseudo element’s position and transform properties can often align the rendering across browsers. Try tweaking the right offset and adding tiny translateY values to compensate for rotational pixel shifts:

* { box-sizing: border-box; }
.arrow-container { padding: 35px 15px; width: 60px; height: 100px; background-color: rgba(0, 0, 0, 0.3); }
.arrow { position: relative; width: 30px; height: 30px; }
.arrow::before, .arrow::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    right: 1px; /* Adjusted from 2px */
    width: 30px; 
    height: 3px; 
    background-color: #ffffff; 
    box-shadow: 0 0 1px 0 #ffffff, 0 0 1px 0 #ffffff, 0 0 1px 0 #ffffff, 0 0 1px 0 #ffffff;
}
.arrow::before { 
    top: 50%; 
    transform-origin: 100% 0; 
    transform: rotate(45deg) translateY(-1px); /* Added translateY */
}
.arrow::after { 
    bottom: 50%; 
    transform-origin: 100% 100%; 
    transform: rotate(-45deg) translateY(1px); /* Added translateY */
}

This compensates for how each browser snaps rotated elements to pixel grids, making the arrow’s shape and position consistent.

2. Switch to SVG for Consistent Rendering #

If CSS tweaks don’t fully resolve the issue, SVG is a foolproof alternative—its vector-based rendering is far more consistent across browsers than CSS pseudo elements. Here’s how to recreate your arrow with SVG (including the multi-layer shadow effect):

<div class="arrow-container">
    <svg class="arrow" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- Horizontal line -->
        <path d="M2 15L28 15" stroke="#fff" stroke-width="3" stroke-linecap="square"/>
        <!-- Top arrow arm -->
        <path d="M28 15L20 7" stroke="#fff" stroke-width="3" stroke-linecap="square"/>
        <!-- Bottom arrow arm -->
        <path d="M28 15L20 23" stroke="#fff" stroke-width="3" stroke-linecap="square"/>
    </svg>
</div>

* { box-sizing: border-box; }
.arrow-container { padding: 35px 15px; width: 60px; height: 100px; background-color: rgba(0, 0, 0, 0.3); }
.arrow { 
    width: 30px; 
    height: 30px; 
    /* Replicate the multi-box-shadow effect with drop-shadow filters */
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

SVG eliminates the subpixel rendering inconsistencies entirely, and the filter property mimics your original box-shadow stack perfectly.

3. Trigger Hardware Acceleration #

Adding transform: translateZ(0) to your pseudo elements forces the browser to use GPU rendering, which can reduce rendering discrepancies between Chrome and Firefox:

.arrow::before, .arrow::after { 
    /* Keep all existing properties */
    transform: translateZ(0); /* Add this line */
}

/* Update the transform declarations to include translateZ */
.arrow::before { 
    top: 50%; 
    transform-origin: 100% 0; 
    transform: translateZ(0) rotate(45deg);
}
.arrow::after { 
    bottom: 50%; 
    transform-origin: 100% 100%; 
    transform: translateZ(0) rotate(-45deg);
}

This aligns the rendering pipeline across browsers, making anti-aliasing and transform behavior more uniform.

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