Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browsers support #18

Open
ImBobby opened this issue Jan 16, 2015 · 6 comments
Open

Browsers support #18

ImBobby opened this issue Jan 16, 2015 · 6 comments
Assignees

Comments

@ImBobby
Copy link

ImBobby commented Jan 16, 2015

Hi, I ran a quick test in IE8 - IE10. I would like to share the result. Maybe after seeing the result, you can set minimum browsers support for this project and add it in the readme.

IE8

icono-ie8

IE9

icono-ie9

IE10

icono-ie10


IE9 render all the icons great except for the logo and icon codepen.

@saeedalipoor
Copy link
Owner

Thank @ImBobby
yes, becuse IE10+ does support skew.

@jpswade
Copy link

jpswade commented Jan 21, 2015

Cross browser support seems to be a more widespread issue:

http://www.browserstack.com/screenshots/6a7d3d6c0d91bb26bfbc46b18c0eeed15b132381

Perhaps disclosing which browsers are supported and known issues might help avoid frustration.

@TheJaredWilcurt
Copy link

There have been newer icons added since these screenshots. Of them almost all work in IE9. So for those that want to use icono but have to support IE9, here's the ones you gotta skip:

Ones that don't work in IE9:

  • icono-frown - Mouth moved above eyes, now it's a derpy australian smiley. Fixed below.
  • icono-caretUp - The lines for the carets don't meet at their ends, so they all look like weird x's
  • icono-caretRight - I fixed this section see below, basically you can detect if you are in IE9 and
  • icono-caretDown - target them like .ie9 .icono-caretUp and give them IE9 specific styles
  • icono-caretLeft - See the link below
  • icono-clock - Hour hand is a few pixels too high and looks like a squiggly line because of it. Fixed below
  • icono-creditCard - The magnetic strip is missing in IE9
  • icono-codepen - This one is just completely busted in IE9. Use SVG instead.
  • icono-dribbble - the center line is missing in IE9 making the basketball look like a tennis ball. Why do we put a space between tennis and ball, but basketball can just be one word. I personally blame the presto rendering engine for that. Europeans.
  • icono-caretUpCircle - Again, same as the other carets, these are all just weird x's
  • icono-caretRightCircle - See link below for fix.
  • icono-caretDownCircle
  • icono-caretLeftCircle
  • icono-caretUpSquare
  • icono-caretRightSquare
  • icono-caretDownSquare
  • icono-caretLeftSquare

I went ahead and fixed the IE9 caret issues, frown face, and clock:

Take that and use it however you want or implement it into the codebase for this repo.


Notes:

  • icono-gear - The amount of teeth on the gear in IE9 is 12, in Chrome it's 16. Looks fine in both though, totally usable.
  • icono-mouse - The center scroll ball lines look a little blurry in Chrome, but IE9 is crisp, sharp and pretty. This one actually looks better in IE9.
  • icono-instagram - In IE9 the bottom corners have a thicker rounded corner on the inside. Still usable, and recognizable as instagram's logo, just with some hipster approved levels of irony due to the icon having a vignette.
  • icono-icono - The Icono logo itself is completely busted as well in IE9, but who cares. The only use anyone other than this project would have with that is putting credits in their projects saying "Icons by Icono", and you could put their logo there, but you could just as easily hide that icon on IE9 and just show text instead, which you could to to begin with. Irrelephant.

Testing was done in Chrome 37 (even though we're up to like 42 or something now, I'll update when I'm good and ready! you're not my mom) and IE9 (32-Bit), both on Win Vista Ultimate 64-Bit.

@saeedalipoor
Copy link
Owner

@TheJaredWilcurt You're awesome and thanks for your great notes, i will do my best to fix this issues.

@TheJaredWilcurt
Copy link

@saeedalipoor Thanks man. A request, can you make a Windows, Ubuntu/Linux, and OSX/Mac icons. That would be pretty useful for cross-platform stuff.

@saeedalipoor
Copy link
Owner

I'll try to make something :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants