1

ran into some issue i have never seen before. It only happens on chrome, the options of a select element show up garbled when the select box is expanded but show all right when something is selected. You can see the issue in the attached screenshot where the left select shows a selected option right and the second shows the expanded view. Looked online but there is not much to find, as the problem cannot be described easily. Encoding is utf8, firefox shows everything fine...

Any ideas?!

attached image:

enter image description here

Will try at another computer too, think it does so though from previous testing.

geodeath
  • 351
  • 1
  • 3
  • 15
  • Can you confirm whether this happens on multiple machines, or just one? Also your reputation seems higher than 10, so please post the screenshot. – Pawel J. Wal Sep 16 '13 at 09:25
  • Would you be able to provide a code sample (or a JSFiddle) for the selects, their CSS, and any JavaScript that might be involved? – Pawel J. Wal Sep 16 '13 at 09:53
  • 1
    this is the link, choosing another font seems to work, so its 100% the custom font in the screenshot, but the question now is why? never had this issue before... could it be the font is not utf8 compatible? Cant be that all the fonts i used previously all these years were!! http://jsfiddle.net/geodeath/JcxTT/ – geodeath Sep 16 '13 at 10:17
  • Since Firefox renders it properly, I'm fairly sure it's localized to Chrome messing with fonts. Could you tell me which operating system you use? Is it a Windows machine or perhaps a Mac? – Pawel J. Wal Sep 16 '13 at 10:20
  • I've looked through your JSFiddle, thank you; it renders fine on Chrome under Windows 8. We'll be much closer to resolution once you give me your operating system. – Pawel J. Wal Sep 16 '13 at 10:22
  • This is a windows 8 computer with the latest version of Chrome and the jsfiddle displays fine, because it is not using the custom font but Arial instead! It is a pc... – geodeath Sep 16 '13 at 10:44
  • Sadly, not having your font (nor the name of it), I cannot help you further. I've found reports of some CSS properties messing with display of custom fonts in Chrome (albeit in much older versions of it), look for example here: http://stackoverflow.com/questions/7327525/why-would-html-text-sometimes-appear-garbled-when-viewing-on-chrome-or-safari-on based on the Fiddle, maybe the `appearance` is to blame (AFAIK `none` is not a valid value for it)? – Pawel J. Wal Sep 16 '13 at 10:51
  • Will look further into it and get back soon, thanks so much for the help, the font is Museo. – geodeath Sep 16 '13 at 11:58
  • Please look into http://graphicdesign.stackexchange.com/questions/9425/museo-font-get-distorted-in-browser as well; they seem to be dealing with an issue similar to yours. From the looks of it, some [issues have been reported with Chromium](https://code.google.com/p/chromium/issues/detail?id=108645) while using local fonts including Museo and haven't been fixed yet, so you might be dealing with a browser bug as well. – Pawel J. Wal Sep 16 '13 at 12:37
  • Hi again, please post the last comment as a proper answer for me to choose it as it is indeed the font. :) – geodeath Sep 25 '13 at 12:50

1 Answers1

1

From the looks of it, some issues have been reported with Chromium while using local fonts including Museo and haven't been fixed yet, so you might be dealing with a browser bug as well.

Pawel J. Wal
  • 1,166
  • 1
  • 11
  • 24
  • Been having this same problem, been loosing my mind trying to determine if there was a tag not closed! – amcdnl Feb 28 '14 at 00:07