starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 01:15:55 +03:00

[GH-ISSUE #248] wrong size in IE #162

New issue

Closed

opened 2026-03-03 14:35:04 +03:00 by kerem · 13 comments

kerem commented

2026-03-03 14:35:04 +03:00

Owner

Originally created by @sarathak on GitHub (May 31, 2016).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/248

not scaling correctly on ie

sample screenshot on attachment

Originally created by @sarathak on GitHub (May 31, 2016). Original GitHub issue: https://github.com/lipis/flag-icons/issues/248 not scaling correctly on ie sample screenshot on attachment ![image](https://cloud.githubusercontent.com/assets/3303507/15676046/56a93bd0-2762-11e6-94f2-b893426d82f3.png)

kerem

2026-03-03 14:35:04 +03:00

closed this issue
added the
bug
label

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@lipis commented on GitHub (May 31, 2016):

which version of IE?

@lipis commented on GitHub (May 31, 2016): which version of IE?

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@sarathak commented on GitHub (May 31, 2016):

11.0.96

@sarathak commented on GitHub (May 31, 2016): 11.0.96

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@labilbe commented on GitHub (Jun 14, 2016):

I can't reproduce on Win10 / IE 11.306.10586.0 and testing with multiple sizes.

@labilbe commented on GitHub (Jun 14, 2016): I can't reproduce on Win10 / IE 11.306.10586.0 and testing with multiple sizes.

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Jun 14, 2016):

I can reproduce on Win7 / IE 11.0.9600

@tomlutzenberger commented on GitHub (Jun 14, 2016): I can reproduce on Win7 / IE 11.0.9600

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@lipis commented on GitHub (Jun 14, 2016):

how does it look if you go directly

@lipis commented on GitHub (Jun 14, 2016): how does it look if you go directly 1. https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/af.svg 2. https://lipis.github.io/flag-icon-css/flags/4x3/af.svg

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Jun 14, 2016):

Really strange...
On the first link it gets displayed like 1x1, but the black and green area seem to get cropped.
On the second one it's rendered correctly (4x3).

@tomlutzenberger commented on GitHub (Jun 14, 2016): Really strange... On the first link it gets displayed like 1x1, but the black and green area seem to get cropped. On the second one it's rendered correctly (4x3). ![flag-icon-css-ie11](https://cloud.githubusercontent.com/assets/5536910/16046594/4db95bd6-324d-11e6-8f68-c9945ae5c712.png)

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@lipis commented on GitHub (Jun 14, 2016):

Don't we all love the good old IE?

@lipis commented on GitHub (Jun 14, 2016): Don't we all love the good old IE?

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Jun 14, 2016):

<sarcasm>Of course we do...</sarcasm>

Could it be possible that there's something "wrong" (= IE incompatible) with the HTML or CSS on the project page?

@tomlutzenberger commented on GitHub (Jun 14, 2016): `<sarcasm>`Of course we do...`</sarcasm>` Could it be possible that there's something "wrong" (= IE incompatible) with the HTML or CSS on the project page?

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@lipis commented on GitHub (Jun 14, 2016):

of course CSS can help.. but the problem is in how the IE renders the SVG.. I'm using the SVGO to optimize them all and it seems that something might be needed for older IEs to figure out the actual size/ratio of the image.. not sure if it's worth fixing it..

@lipis commented on GitHub (Jun 14, 2016): of course CSS can help.. but the problem is in how the IE renders the SVG.. I'm using the SVGO to optimize them all and it seems that something might be needed for older IEs to figure out the actual size/ratio of the image.. not sure if it's worth fixing it..

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Jun 14, 2016):

I tried max-height: 75%; on .country and img.flag.
Didn't work.

But the following makes it less worse (only tested in IE11 yet):

.country {
  /*max-width: 100%;*/
  width: 100%;
}
.country .flag {
  margin: 0 auto;
  max-height: 7.5vw;
  max-width: 10vw;
}

You could also try to add width and height to the image tags.
http://stackoverflow.com/questions/3396475/specifying-width-and-height-as-percentages-without-skewing-photo-proportions-in

@tomlutzenberger commented on GitHub (Jun 14, 2016): I tried `max-height: 75%;` on `.country` and `img.flag`. Didn't work. But the following makes it less worse (only tested in IE11 yet): ``` css .country { /*max-width: 100%;*/ width: 100%; } .country .flag { margin: 0 auto; max-height: 7.5vw; max-width: 10vw; } ``` You could also try to add `width` and `height` to the image tags. http://stackoverflow.com/questions/3396475/specifying-width-and-height-as-percentages-without-skewing-photo-proportions-in

kerem commented

2026-03-03 14:35:06 +03:00

Author

Owner

@sarathak commented on GitHub (Jun 14, 2016):

can you open
http://flag-icon-css.lip.is/
with ie
then you can see

@sarathak commented on GitHub (Jun 14, 2016): can you open http://flag-icon-css.lip.is/ with ie then you can see

kerem commented

2026-03-03 14:35:06 +03:00

Author

Owner

@ksymeon commented on GitHub (Sep 18, 2016):

All tests on Windows 10 latest update. From the tests below obviously the SVG file is correct and all browsers can display it properly. Only issue I can see is the way the github page is rendered:

http://flag-icon-css.lip.is/
- IE 11.187.14393.0: good
- Microsoft Edge 38.14393.0.0: good
- Chrome 53.0.2785.116 m (64-bit): good
https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/af.svg
- IE: BAD (1)
- Edge: BAD (2)
- Chrome: good
SVG file downloaded and opened in the browser:
- IE: good
- Edge: good
- Chrome: good

(1):

(2):

@ksymeon commented on GitHub (Sep 18, 2016): All tests on Windows 10 latest update. From the tests below obviously the SVG file is correct and all browsers can display it properly. Only issue I can see is the way the github page is rendered: - http://flag-icon-css.lip.is/ - IE 11.187.14393.0: good - Microsoft Edge 38.14393.0.0: good - Chrome 53.0.2785.116 m (64-bit): good - https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/af.svg - IE: BAD (1) - Edge: BAD (2) - Chrome: good - SVG file downloaded and opened in the browser: - IE: good - Edge: good - Chrome: good (1): ![ie_github_page](https://cloud.githubusercontent.com/assets/831087/18615870/3039e506-7da9-11e6-94cf-d3b9acb7e5f7.png) (2): ![edge_github_page](https://cloud.githubusercontent.com/assets/831087/18615869/3037e60c-7da9-11e6-87e1-4419dc6aea84.png)

kerem commented

2026-03-03 14:35:06 +03:00

Author

Owner

@lipis commented on GitHub (Sep 18, 2016):

Thanks @ksymeon!

@sarathak I will close that issue then as it looks like in the latest IE/Edge they are OK..

@lipis commented on GitHub (Sep 18, 2016): Thanks @ksymeon! @sarathak I will close that issue then as it looks like in the latest IE/Edge they are OK..