Bad rendering of some text

[henryoswald]

We have started to see some strange rendering on the pages with text, mainly in chrome. Resizing the page always fixes all of these problems. They seem to generally happen when the page is quite narrow.

1. if you load the page https://www.sharelatex.com/about with it selected quite narrowly (less than a 13" macbook monitor) then the email address at the bottom will render badly

2. The text will not render some times example on learn home page https://www.sharelatex.com/learn

3. sometimes text does not sit in the box nicely (look at 'This')

4. around where code elements are used the rendering will often overlap https://www.sharelatex.com/learn/Bibliography_management_with_bibtex (lower down on page)

[acconrad]

Hi @henryoswald can you assign this to me? I'll take a look at this this week

[henryoswald]

I think you have left the team as we have hit github limits so can't assign atm. Let me know if you need anything.

[acconrad]

@henryoswald if you could try one thing - change your base font on your local instance from "Open Sans", sans-serif; to Helvetica, Arial, sans-serif; One issue I've seen in the Chrome forums is that web fonts can cause rendering issues. Another thing I would remove is text-rendering: optimizeLegibility and -moz-osx-font-smoothing: grayscale, as they mess around with rendering as well. I'm not 100% that this will work, but the common thread over the years with font overlapping/missing anchor tags has to do with custom fonts. See if a stock desktop font (Helvetica for Mac, Arial for Win) doesn't resolve this.