Skip to main content

Is Safari displaying a tooltip containing the complete content of an overflowed area?

- (update: )

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:

Language CSS
.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:

Language JS
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:

Language CSS
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {

  color: #00F;
  background-color: #CCC;
}
Language CSS
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media
{
  .safari_only {
    color: #00F;
    background-color: #CCC;
  }
}}
Language CSS
/* 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:

Language CSS
/* 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.

Socialise: