The effect is not usually a biggie, except for when your overflowed content is a rather large data-URI image. It dominated the viewport. Completely unacceptable.
After hours of research I found a couple of methods online. None of which worked out of the box, but with a little tinkering the following resolved that specific issue:
Unfortunately, for me, it created another problem.
The ellipsis was no longer replaced by content when the element gained focus and scrolled to the right. Leaving a blank space where the hidden content should lie.
Yes, it did get that desperate.
During testing I noted that when toggling "focus" in the Web Inspector window Safari behaved 100% correctly. Perhaps adding a small delay upon focus then overriding with
text-overflow:inherit may work. So I needed a browser-sniffer to test the hypothesis:
The result: Nah, didn't work. Next solution…
Safari CSS hacks
I ran across Jeff Clayton's Safari CSS hacks and thought I'd take notes and give it a shot:
These appeared to work well, albeit I used them to remove the ellipsis property from Safari:
What I don't like is the
Safari 6.1-10 part. What of Safari 11?
Well the issue was resolved, though not to my satisfaction. Removing the property from Safari, with a hack, was the only alternative I found to meet my requirements. I'll deal with Safari 11 when it lands.
Still on the lookout for a complete solution. So if you come across one please, please, please let me know.