I did this exact same thing a few weeks ago on two sites I built for hover effects on certain links and elements - I really like the effect you can achieve with it. For the most part, it works pretty good with icon fonts too (though Safari was a bit hit-and-miss).
Yeah I noticed in Safari for iOS, if text wraps to a second line, the background does not clip to it - my poorly done work around was to hide my overflown text
I did this exact same thing a few weeks ago on two sites I built for hover effects on certain links and elements - I really like the effect you can achieve with it. For the most part, it works pretty good with icon fonts too (though Safari was a bit hit-and-miss).
Yeah I noticed in Safari for iOS, if text wraps to a second line, the background does not clip to it - my poorly done work around was to hide my overflown text
Ahhhh my issue was with icon fonts specifically that the gradient never applied as I'm using gradients on icons heavily on my portfolio website.
What you might want to look at is
-webkit-box-decoration-break: clone;regarding the text wrapping onto a second line. šAhhh - this is awesome! Iām going to give it a shot later on today - thank you James!