Safari 8 text-indent bug - css

Question

We've just launched a new site and are experiencing some problems in older versions of Safari with text-indent. A live link is supplied below, hopefully somebody can help me to debug this issue? I've never experience text-indent issue before.
HTML
<ul>
<li>Prev</li>
<li>Next</li>
<li>Scroll Down</li>
</ul>
CSS
li {
padding: 2px 0;
display: inline-block;
vertical-align: text-top;
font-size: 0.9em;
overflow: hidden;
}
#slide-prev, #slide-next, #scroll-down {
margin-left: 10px;
padding: 0;
}
#slide-prev {
width: 18px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat 0 -406px;
text-indent: -9999px;
}
#slide-next {
width: 18px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat -40px -406px;
text-indent: -9999px;
}
#scroll-down {
width: 14px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat -80px -406px;
text-indent: 9999px;
}
Cross Browser Screenshots
Live Link

Answer 1

A better way to hide text is using this method:
.hide-text{
text-indent: 101%;
white-space: nowrap;
overflow: hidden;
}
.slide-prev {
width: 18px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat 0 -406px;
}
You can add this class to each of the items to hide the text. In your code above, you are repeating a lot and I also wouldn't recommending using IDs like this in your CSS.
<li>Prev</li>

Answer 2

I have resolved this issue with help from this article.
text-indent only works on block level elements, so it's a case of adding that to the CSS. I have changed my text-indent technique to include white-space and overflow as suggested by #paul-redmond, for a more full proof text-indent solution.
The key was being a block level element however.
CSS
#slide-prev, #slide-next, #scroll-down {
margin-left: 10px;
padding: 0;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}