Apple Cannot Display SVG Map Colors?

Question

Created Sep ’22

Replies 1

Boosts 0

Participants 1

I was developing an external website that generates data into an .html file based on database information, displaying availability by a fill color (green or red). On Windows and Android devices, everything displays correctly. On Apple devices (tested on iPhone7 in Safari and Chrome, and a Macbook Pro on Safari), it cannot process the colors and leaves everything gray.

My current guess is that Apple's OS does not accept a css tag I used on the page, but I've been unable to narrow down my search effectively. I would greatly appreciate any assistance.

Page: https://hsfm-booking-maps.s3.amazonaws.com/Farmer%27s+Market+-+Sunday%2C+October+2nd%2C+2022

Boost

Answer 1

BAMMichael OP

Sep ’22

Accepted Answer

Here is some of the CSS where I suspect the problem lies: (declared in-line with style tags)

.green{filter:invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)} .gray{filter:invert(16%) sepia(10%) saturate(267%) hue-rotate(169deg) brightness(90%) contrast(93%)} .red{filter:invert(9%) sepia(98%) saturate(6552%) hue-rotate(0deg) brightness(96%) contrast(110%)}

0