Removing the flex class on each item seems to show the logo. I am not exactly sure why this works on all browsers but Safari. I also confirm that the same problem happens on Safari mobile.

@coderabbitai read these files:

static/assets/images/icons/circleci.svg
static/assets/images/icons/github.svg
static/assets/images/icons/gitlab.svg
src/components/pages/home/section/getting-started.tsx

What’s your take on this? What could be causing this Safari compatibility issue that prevents SVG logos from rendering when flex is used on buttons? Can you suggest an alternative approach?

@GabLeRoux The issue is related to Safari's quirky handling of SVGs within flex containers. Here are a few alternative approaches you could try:

1. Replace flex with grid layout:

<Link
  to={url}
  className="group grid place-items-center border-gray-600 border-solid rounded-sm border-2 px-6 py-3 w-[180px] h-[70px] transition-all duration-200 hover:scale-110 hover:bg-gray-600"
>
  <Logo className="fill-brand-text-light dark:fill-brand-text-dark group-hover:fill-white" />
</Link>

2. Add a non-flex wrapper div around the SVG:

<Link
  to={url}
  className="group flex items-center justify-center border-gray-600 border-solid rounded-sm border-2 px-6 py-3 w-[180px] h-[70px] transition-all duration-200 hover:scale-110 hover:bg-gray-600"
>
  <div>
    <Logo className="fill-brand-text-light dark:fill-brand-text-dark group-hover:fill-white" />
  </div>
</Link>

3. Use explicit width/height on SVGs:

<Link
  to={url}
  className="group flex items-center justify-center border-gray-600 border-solid rounded-sm border-2 px-6 py-3 w-[180px] h-[70px] transition-all duration-200 hover:scale-110 hover:bg-gray-600"
>
  <Logo className="w-[120px] h-[25px] fill-brand-text-light dark:fill-brand-text-dark group-hover:fill-white" />
</Link>

I recommend trying the grid layout approach first as it's the cleanest solution and maintains the same visual appearance while avoiding Safari's flex-related SVG rendering issues.

#!/bin/bash
# Read the SVG files
echo "=== CircleCI SVG ==="
cat static/assets/images/icons/circleci.svg
echo -e "\n=== GitHub SVG ==="
cat static/assets/images/icons/github.svg
echo -e "\n=== GitLab SVG ==="
cat static/assets/images/icons/gitlab.svg
echo -e "\n=== Getting Started Component ==="
cat src/components/pages/home/section/getting-started.tsx

Learnt from: GabLeRoux
URL: https://github.com/game-ci/documentation/issues/493

Timestamp: 2025-01-15T23:33:30.583Z
Learning: Safari has issues rendering SVGs within flex containers. Alternative approaches include using grid layout, adding a non-flex wrapper div around the SVG, or setting explicit dimensions on the SVG element.