GitHub, GitLab and CircleCI logos for call to action buttons are not showing properly on Safari

[GabLeRoux]

Light theme on Safari :

Dark theme on Safari :

[GabLeRoux]

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.

[GabLeRoux]

@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?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@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.

🔗 Analysis chain

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/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

Length of output: 12937

---

✏️ Learnings added

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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.