CSS shape-outside on a float inside a Text element not working on iPhone

[tazulay]

Please see how the text wraps around the circle with the “Dust and Rain” image: https://ruthhartley.com/ . It works as it should on the desktop, even when resized to mobile width. But on actual iPhones it’s as if I didn’t use shape-outside at all.

I tried to replicate it in this Code Pen: https://codepen.io/eazulay/pen/jOzGWZV
However, this CodePen works fine even on the iPhone. So I must conclude there must be some other CSS added by the X-Theme that makes the shape-outside not work on iPhones. But I cannot figure out exactly what.

I tried shape-outside: circle(), circle(50%), and margin-box. All work fine on desktop (Firefox and Chrome), but none work on my iPhone SE.

Can anyone help with this?

[ruenel]

Hello @tazulay,

Thanks for writing in!

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

You may need to contact a 3rd party developer or the creators of the script that you have applied in your page for further assistance.

Thank you for your understanding.