React Project: Safari seems to be rendering, but not painting elements?

Question

I'm rendering a list of cards that each display some data along with three rows that allow the user to navigate to a specific, expanded section of that card.

For some reason, Safari seems to be rendering the three navigation rows for each card, but they are white and transparent. I know they're rendered because I can still click on the space where the row would be and the navigation works as expected. It's just invisible.

This problem is not happening when using Chrome. It only happens on Safari: both on my desktop in the browser and when running Safari on iOS. There are no errors in the console.

Another strange puzzle piece is that when I inspect the element's in Safari they appear on the screen! Here is a link to a video I took to show the behavior.

Any ideas???

Answer 1

In case anyone stumbles upon this, I took Jay's advice and started trimming CSS. Eventually I realized that the "update rows" had both display: "flex" and position: "relative" set. Once I removed position: "relative," which wasn't doing anything in the first place but must have been added by mistake, Safari rendered it perfectly.

TLDR: For Safari, display: "flex" and position: "relative" on the same div created rendering issues.