The background gradient color does not work on safari browser?

[norelleliang]

The background gradient color does not work on safari, it just blank once open in safari, anyway on how to fix it?

[aldotestino]

I solved this by adding style={{ transform: 'translate3d(0,0,0)' }} directly on the div.

<div style={{ transform: 'translate3d(0,0,0)' }} className="absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] bg-[#946263]"></div>

Reference

[vishal-parekh]

I added the same inline style to the div but there's some flickering that occurs and won't stop until it fully loads or if you scroll down then back up again. You can probably reproduce the behavior by repeatedly refreshing the affected page. I tried to additionally (and independently) add "transform-gpu" to the Tailwind CSS class name but that didn't fix it either. @aldotestino

[akash6565]

According to my knowledge u have to change the div style or className that needs to be positioned on the left edge (which chrome does by default). IT might work in that way. just using basics css concept.

[flip-in]

I solved this by adding style={{ transform: 'translate3d(0,0,0)' }} directly on the div.

<div style={{ transform: 'translate3d(0,0,0)' }} className="absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] bg-[#946263]"></div>

Reference

this breaks light and dark mode on safari desktop and mobile

[Poojan-20]

I solved this by adding style={{ transform: 'translate3d(0,0,0)' }} directly on the div.

<div style={{ transform: 'translate3d(0,0,0)' }} className="absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] bg-[#946263]"></div>

Reference

this breaks light and dark mode on safari desktop and mobile

i also had the same issue you can use next-themes npm package to setup light and dark mode easily. It won't break on safari mobile desktop (with this style property added).