Hi,
I’m having issues with an element that doesn’t show across devices. Everything is fine desktop-wise and Android-wise, but when it comes to ios, the heading disappears.
Here’s the read-only link (please be aware I’m fairly new to webflow);
I also added print screens.
Really curious to hear how I can solve this.
Thanks in advance!
Hi Lavinia!
Welcome to the forum! Please update your post and provide a read-only link to your Webflow project so we can take a look. Instructions are here. Thanks!
Hi Lavinia, thanks for updating your post. This is an issue with mobile Safari not rendering gradient applied to text properly. Can you please try the following?
Go into your Page Settings, and add the following custom code to “Before tag”
You’ll have to republish your site to the webflow.io domain and check the mobile version again, but hopefully this takes care of it for you.
<style>
.gradient-text {
-webkit-box-decoration-break: clone;
}
</style>```Not sure if I did something wrong. I added the code you provided to the Footer code and republished the website, but it doesn’t seem to work. 
Of course, I’m sorry. This is my fault. You’ll want to give a unique class to your heading, and then replace .gradient-text in the code with the class name you gave it. Or, alternatively, just rename your heading class to .gradient-text
Tried, but still not working. It seems like the class is applied, but the element still doesn’t show on iOS (Safari/ Chrome) even after a hard reload.
Okay! Can you try selecting your Heading element and switch the layout mode from Flex to Block? Sorry for all the confusion here – there are several ways to work around this issue and none of them consistently work for everyone.
That’s it! It worked. Thanks! 
Hey Chris,
I have similar issue. Can you please take a look into it? here the link: Elements aren't visible in IOS devices
hi Chris, may i ask if this issue is due to using flex? I have issue of disappearing flex in IOS