Chrome浏览器中CSS列内CSS变换元素消失问题求助

Hey Andrew, nice find on this weird Chrome rendering quirk—this is definitely a tricky edge case with CSS columns and stacking contexts. Let’s dig into what’s going on and how to fix it.

What’s Causing This? #

The issue boils down to a conflict between Chrome’s column layout engine and stacking contexts created by transform properties:

• When you apply transform to each <li>, every list item gets its own independent stacking context.
• Chrome seems to miscalculate the stacking order of child elements that also have transform applied, shoving them behind the column container or outside the visible viewport for all columns after the first.

Fixes to Try #

Here are three reliable workarounds that should bring those missing child elements back:

1. Swap CSS Columns for Flexbox (Most Reliable) #

CSS columns have a few known edge cases with transforms, so switching to a flex-based grid avoids the problem entirely:

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 10px; /* Match your original spacing */
}

li {
  flex: 1 1 calc(33.333% - 10px); /* 3-column layout minus gap */
  list-style: none;
  transform: translateZ(0); /* Keep your original transform */
}

2. Remove Parent Transform (Simplest, If Possible) #

If you don’t strictly need the transform on the <li> elements (e.g., you were using it for GPU acceleration), removing it will instantly fix the child rendering issue. If you do need the performance boost, use will-change instead:

li {
  will-change: transform; /* Triggers GPU acceleration without creating a problematic stacking context */
  /* Remove transform: translateZ(0); */
}

3. Force a Stacking Context on the Column Container #

Adding a lightweight transform to the parent <ul> can resolve the stacking context mismatch:

ul {
  column-count: 3;
  transform: translateZ(0); /* Creates a new stacking context for the container */
}

All these methods should resolve the disappearance issue. The flexbox approach is the most future-proof since it sidesteps Chrome’s column layout limitations.

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