Icons can't shown on Apple devices newest Safari (MacBook, ipad)

[XinChenQC]

On Windows or Android systems, the icons look normal.

However, when I tried Apple devices (MacBook, iPad), the newest Safari browser in the apple store. The icon can't be shown correctly,

Site: http://www.quantabricks.xyz/workflow

[ndri]

Looks like SVG elements behave a little differently on Safari. When no size is specified, other browser try to infer the size from the SVG, but on Safari, their size is set to 0 by default.

You have only specified the size on the parent element, so you can give the icons a class of size-full (or width-full height-full) and it works. You should generally give 24px icons a size-6, 20px icons a size-5 and 16px icons a size-4 though.

[XinChenQC]

The relevant code is:

               <span 
                  onClick={onClickFold} 
                  className="w-3 h-3 bg-gray-500 hover:bg-red-800 
                  hover:scale-150 active:scale-125 transition-transform duration-300 
                  rounded-full cursor-pointer flex items-center justify-center">
                  <ChevronUpDownIcon className='text-brown-50'/>
              </span>

I will try to fix it as you said and go to the Apple store for a test.

[XinChenQC]

Add size-full

Solved!