Wrapped text cutoff on iOS devices ONLY

Hi Webflow world!

I’m running into a very odd bug that has been rearing its ugly head seemingly without rhyme or reason!

The headings in each section have two styling classes applied to them “heading” and “L”. They also have a text span with a gradient styling and this class is called “gradient-text”.

Normally, I just keep the wrapped texts display set to Inline so it is responsive to the text surrounding it.

I have it set up this way and it looks great in the webflow viewport, on chrome inspect, on ALL android devices, but is cut off on iOS devices (both chrome and safari).

feel free to check this page out on desktop and android mobile! You’ll notice it looks fine and all headings are displaying properly. If you check it out on iOS, some headings are unfortunately broken.

What makes this even more strange is SOME display fine, while others do not, but they all have the same exact class/styling applied.

Thanks in advance to anyone that can shed some light on this!


Here is my site Read-Only: https://preview.webflow.com/preview/controlmvp?utm_medium=preview_link&utm_source=designer&utm_content=controlmvp&preview=9fa2819d72866570f981fa42cce413ca&pageId=61cb2f602534ebfc352f1df6&workflow=preview

hi @zackshadow you are using gradient and mask but white space will brake these rules when word wrap to next line. You can try your <span> keep in one line with white-space: nowrap. WF has tool for this in Typography so you do not need to use custom CSS.

Hope that will help