Content displays on all browsers except Safari

user_11473363 0
Viewed 38

I have created a weather app for my portfolio and noticed when I published it to the web and looked at my mobile device that the days of the week do not show. I tried troubleshooting and viewed on different browsers. Turns out that it displays on every browser except Safari. Was wondering what the issue is or how I could get this to work.

[This is how it should display and does fine on Chrome and Firefox][1]

threeDailyWeather.map((item) => (
                                        <div
                                            key={item.datetimeEpoch}
                                            className='flex flex-col justify-between items-center p-2 bg-[rgba(3,15,30,0.65)] rounded-md'
                                        >
                                            <p className='text-[1rem]'>
                                                {convertDate(item.datetime)}
                                            </p>
                                            <img
                                                src={setIconDisplay(item.icon)}
                                                className='max-w-[50px] h-[auto] mt-2'
                                            />
                                            <p className='text-[12px] my-2'>{item.conditions}</p>
                                            <p className='text-[48px] text-[rgb(38,127,234)] font-semibold leading-none'>
                                                {convertTemp(item.temp)}°
                                            </p>
                                        </div>
                                  ))```
safari cross-browser browser css html
1 Answers

It would have been great to show us part of the code...

I guess that you are using a feature that is not supported by Safari, it was often in the CSS part for me. *

What version of safari did you use?

Have you tried on safari for mac too? Because the ios and the mac version of safari are different.

One great tool to check cross-browser compatibility is Caniuse, it gives you the minimal version of each browser needed to show your website at it's full potential.

user_154173330
Related