React + Tailwind + Lucide icons randomly disappear until browser zoom changes (Chrome & Edge)
Hi everyone,
I’ve been debugging one of the strangest frontend issues I’ve ever encountered and I’m completely stuck.
Stack
React
Vite
TypeScript
Tailwind CSS
Lucide React
Chrome & Edge (Chromium)
The Problem
Some Lucide icons randomly don’t render.
The weird part is that they’re still there:
The button is clickable.
Hover effects still work.
The SVG exists in the DOM.
Width and height are correct.
Computed styles look normal.
display, visibility, opacity, stroke, color, etc. are all correct.
Only the icon itself isn’t painted.
The Strange Part
Changing browser zoom immediately changes which icons appear.
Example:
At 90%, some icons disappear.
At 100%, different icons disappear.
At 110%, those icons suddenly appear again.
The behavior changes depending on the zoom level.
This happens in both Chrome and Microsoft Edge.
Things I’ve Already Tried
Removed all page blur animations.
Added global Lucide CSS rules (flex-shrink: 0).
Removed unnecessary transforms.
Verified SVG width/height.
Verified computed styles.
Verified stroke="currentColor" and computed color.
Tested browser hardware acceleration.
Refactored layout containers.
Investigated overflow and flexbox.
None of these changed the behavior.
Example SVG
<svg
class="lucide lucide-users size-3 text-brand"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
...
</svg>
Computed styles look completely normal:
width: 12px
height: 12px
display: block
flex-shrink: 0
stroke: correct color
color: correct color
Yet the icon is invisible.
Important Detail
The invisible icons are still clickable.
The layout space exists exactly where the icon should be.
Only the SVG isn’t rendered.
Browser zoom immediately makes them appear again.
Question
Has anyone seen something like this before?
Is this likely:
a Chromium paint invalidation issue?
a CSS rendering bug?
a Tailwind interaction?
a Lucide issue?
something else entirely?
I’d really appreciate any ideas because I’ve spent hours debugging this and haven’t been able to isolate the root cause.
Thanks!