Why isn't the new gradient feature working on iOS for my website?

Store Design
1

Shopify released a really cool gradient feature, it just doesn’t work for iOS.

Has anyone tried it?

My website https://hman.com.br/pages/suporte-hman

Kennyd1_0-1656106563959.png
Kennyd1_0-1656106563959.png1857×744 48 KB

Kennyd1_1-1656106747079.png
Kennyd1_1-1656106747079.png401×725 30 KB

But on mobile it looks like this

Kennyd1_2-1656106777763.png
Kennyd1_2-1656106777763.png568×1024 108 KB

1 Like
2

@Kennyd1

yes, please generate your color here and used

1 Like
3

Hi @Kennyd1 ,

Gradient still works fine on IOS, because your background is fixed, and this is not supported by IOS.

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
	.gradient {
		background-attachment: scroll !important;
	}
}

It will help you to display the gradient well in IOS.

1 Like
4

thanks for the suggestion the command, but thanks it didn’t work either, it’s still fixed. This is the only edition I have in base.css

5

Hi @Kennyd1 ,

Please change code:

background-attachment: scroll !important;

=>

background-attachment: local !important;

Hope it helps!

1 Like
6

Thanks for the help, it didn’t work either, I believe that for it to have the same effect as on desktop, it needs to be through java maybe, I tried everything already in css

1 Like
7

@Kennyd1

did you try our code?

8

Yes, I tested it, where do you suggest to paste the code?

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7db9e8+0,251fc6+49,2856d6+50,1e4b99+100 /
background: rgb(125,185,232); / Old browsers /
background: -moz-linear-gradient(-45deg, rgb(125,185,232) 0%, rgb(37,31,198) 49%, rgb(40,86,214) 50%, rgb(30,75,153) 100%); / FF3.6-15 /
background: -webkit-linear-gradient(-45deg, rgb(125,185,232) 0%,rgb(37,31,198) 49%,rgb(40,86,214) 50%,rgb(30,75,153) 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(135deg, rgb(125,185,232) 0%,rgb(37,31,198) 49%,rgb(40,86,214) 50%,rgb(30,75,153) 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#7db9e8’, endColorstr=‘#1e4b99’,GradientType=1 ); / IE6-9 fallback on horizontal gradient */

9

Hi @Kennyd1 ,

You can refer: https://community.shopify.com/topic/1493462

Is it what you want?