Jackom
Jackom

Reputation: 436

CSS radial gradient not work for iPhone and Mac

I have this code for background style of my div and works well for all mobile device and desktop but not for iOS. This is my code:

#test{
box-shadow: -1px 0px 5px 1px #ccc;
padding:20px;
background: radial-gradient(#f7f7f7 2px, transparent 3px), radial-gradient(#f7f7f7 2px,transparent 3px), #fff;
background-position-x: 0%, 0%, 0%;
background-position-y: 0%, 0%, 0%;
background-size: auto, auto, auto;
background-position: 0 0, 20px 20px;background-size: 10px 10px;
height:100px;
}
<div id="test">
</div>

On iOS, the dots in the background are shown empty and not full. How can I fix my code to see the filled dots in my background on iOS device?

Upvotes: 1

Views: 1045

Answers (1)

Nexo
Nexo

Reputation: 2331

Set below properties also as only radial-gradient won't work in all browsers.

background: -webkit-linear-gradient();
background: -moz-linear-gradient();
background: linear-gradient();

Use thiswebsite to generate those properties.

Upvotes: 1

Related Questions