The fixes
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:
.overflow-container {
text-overflow: ellipsis;
}
.overflow-container::after {
content: " ";
display: block;
width: 0;
height: 0;
line-height: 0;
}
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.
Safari browser-sniffing
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:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (!(ua.indexOf('chrome') > -1)) {
// Safari only
document.write("99 problems and Safari's just one.");
}
}
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:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color: #00F;
background-color: #CCC;
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media
{
.safari_only {
color: #00F;
background-color: #CCC;
}
}}
/* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */
@media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { @media
{
.safari_only {
color: #00F;
background-color: #CCC;
}
}}
These appeared to work well, albeit I used them to remove the ellipsis property from Safari:
/* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */
@media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { @media
{
.overflow-container {
text-overflow: inherit;
}
}}
What I don't like is the Safari 6.1-10
part. What of Safari 11?
Conclusion
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.
Social links and email client: