Skip to content

Update hide-text mixin to use a simpler technique with better performance. #96

wants to merge 1 commit into from

3 participants


Based on the following article I'm recommending a change to the Phark image replacement technique:

Most people are familiar with using text-indent: -9999px; but this practice has been called into question because it draws a 9999px wide box that extends off screen, which can adversely affect performance. By going back to the original method which includes overflow: hidden; we can avoid the performance hit by preventing the box from being drawn at a size larger than the visible area of the element in question.

The article does a great job of summarizing the pros and cons of the various methods available.

plapier commented May 9, 2012

I wonder if this would be better as a separate mixin? Keeping the current hide-text mixin as-is, while adding an additional text-indent mixin? That way we provide an the option to use whichever mixin?

Though, is a text-indent mixin necessary when only two CSS declarations are used in the mixin?

@mixin text-indent {
    text-indent: -9999px;
    overflow: hidden;

Honestly, the mixin doesn't even feel like part of the stated purpose of Bourbon. But I saw it in here already and I think this method is better, so I figured it was worth a pull request.

plapier commented May 10, 2012

I think it would be best to leave the mixin as is for now. I dont believe the alternative technique requires a mixin due to the simplicity of it. Thanks for generating the discussion and the pull request, Steve!

@plapier plapier closed this May 10, 2012
heeton commented Feb 1, 2013

Given that the boilerplate method has been reverted, perhaps this should be removed?


plapier commented Feb 19, 2013

Given I cannot reopen this issue. I created a new one: #192

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.