Icon Pack for jquery mobile 1.4 doesnt work in Internet Explorer about jquery-mobile-icon-pack HOT 31 CLOSED

They don't work also in Opera

from jquery-mobile-icon-pack.

@frankabbruzzese I've released an update to Icon Pack that changes the way icons are attached to elements. Would you please confirm that this behaviour still exists?

from jquery-mobile-icon-pack.

@commadelimited ,
Just now I cloned again your upgrade 1.4 repository, that is the one with the upgrade for jquery mobile 1.4. The problem with opera and explorer persists. The behavior in the two browser is different, in IE9 icons are not visible at all, while in opera, some strange pixel patterns are shown.
Since both Opera and IE9-10 supports svg url format, for sure they show the svg without falling back to the png. Mybe there is some problem in the charset. I noticed that there are some differences in the charset of the jquery mobile 1.4 official icons and your icons. Both declares initially charset=US-ASCII, but then the official jquery mobile 1.4 icons declare US-ASCII also in the xml root tag while you use: .
Maybe, the charset mismatch between the initial charset declaration and the one contained in the root xml tag causes the problem.
In fact, I am able to see each single .svg file that doesn't contain any charset mismatch, in IE9, bu I am not able to see the url encoded icons contained in the Css file (that contain the initial US-ASCII declaration )

from jquery-mobile-icon-pack.

Interesting catch @frankabbruzzese. I'll look at replacing the charset and see if that fixes it.

from jquery-mobile-icon-pack.

Hello, icons aren't visible on FF 26.0 either ...

from jquery-mobile-icon-pack.

Not visible in FF 27

from jquery-mobile-icon-pack.

Noted everyone. I'll get on this one as soon as possible.

from jquery-mobile-icon-pack.

It only works on chrome

from jquery-mobile-icon-pack.

I recon its an embedding problem too.
If I do as follows I can get it to work in Firefox:

.ui-icon-beer:after {
background-image: url(../jqmip1317786/source/SVG/beer.svg);
background-size: 16px 16px;
}
, but ofc it is black and not default white, since color is injected in embedding.

from jquery-mobile-icon-pack.

It seems that there is an illegal part "\9" in the embedded svg. Firefox says as follows when inspecting 'adjust' on the icon page:

XML Parsing Error: unclosed token
Location: data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20500%20500%22%3E%20\9%20%3Cpath%20d%3D%22M214.286%20401.786v-303.571q-41.294%200-76.172%2020.368t-55.246%2055.246-20.368%2076.172%2020.368%2076.172%2055.246%2055.246%2076.172%2020.368zM428.571%20250q0%2058.315-28.739%20107.562t-77.985%2077.985-107.562%2028.739-107.562-28.739-77.985-77.985-28.739-107.562%2028.739-107.562%2077.985-77.985%20107.562-28.739%20107.562%2028.739%2077.985%2077.985%2028.739%20107.562z%22%20fill%3D%22#ffffff%22%20%2F%3E%20%3C%2Fsvg%3E
Line Number 1, Column 186: \9 <path d="M214.286 401.786v-303.571q-41.294 0-76.172 20.368t-55.246 55.246-20.368 76.172 20.368 76.172 55.246 55.246 76.172 20.368zM428.571 250q0 58.315-28.739 107.562t-77.985 77.985-107.562 28.739-107.562-28.739-77.985-77.985-28.739-107.562 28.739-107.562 77.985-77.985 107.562-28.739 107.562 28.739 77.985 77.985 28.739 107.562z" fill="
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^

from jquery-mobile-icon-pack.

1. It works o chrome and safari, but not in IE, FF, and Opera.
2. As I already pointed out the "illegal char" might depend of a charset mismatch. This would explain why it works in some browser (more tolerant) and it doesn't i other ones.

from jquery-mobile-icon-pack.

Hey guys,
the offending character is the "#" with "#ffffff". If you swap "#ffffff" for "%23ffffff" in your jqm-iconpack .css you will be fine :) Same goes for manipulate.py, though I recommend adding a replace rule there à la
xml = xml.replace('#', '%23') #for stringify
str = str.replace('%23',#) #for destringify

cheers

P.S. Firefox and Internet Explorer seem to treat the # as comment start and strip of the color and closing tags from the svg

from jquery-mobile-icon-pack.

Ah, thanks @r4co0n, that's an easy enough swap. I'll take a look at changing that out soon.

from jquery-mobile-icon-pack.

Just updated to JQM 1.4. and reverted it, when I run into this issues. So, is there any progress going on there? :)

from jquery-mobile-icon-pack.

Thanks to everyone who alerted me to this issue. I made the change suggested by @r4co0n and it fixes it in Firefox. I'm on a Mac and don't have IE available to me but I'm going to guess that this resolve the IE issue as well. Could I please get some confirmation?

from jquery-mobile-icon-pack.

Sorry I can't give you a confirmation. On windows, while icons work on the las versions of Chrome, Safari, and Firefox, icsons don't work in IE and Opera.
I return in my opinion: there is a charest mismatch. The problem with the # char is just a synthom of this more general problem. Using char encoding for # just solves some of the char mismatches.
P.S. I verified this on your on-line demo...so if you have not updated it yet...my considerations do not apply.

from jquery-mobile-icon-pack.

I just checked an the icons are working for me in IE. They are also appearing in Firefox atm. Unfortunately the icons are not working in slightly older Android devices (2.3.6). Would be great if someone could verify that though.

from jquery-mobile-icon-pack.

@rthijssen
have you tried the demo web site or have you arranged your own demo?
The demo web site doesn't work for me both on ie9 and ie10. Maybe you used an older ie version and jq mobile revert to png images...??

from jquery-mobile-icon-pack.

@frankabbruzzese I did both.
The demo site is not working for me on Android 2.3.6 or IE. On Android it looked like the alignments where off. On IE the icon box is empty.

In my own demo (no png fallback) no icons appeared on the Android device but the icons did work in IE (including IE Mobile). Stuff you might want to know:

1. I replaced the '${icon_color}' part with '%23FFF'.
2. Pure CSS, so no png fallback implemented
3. I use JQM 1.4.

from jquery-mobile-icon-pack.

Okay. I reuploaded the demos just to be on the safe side: http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/ They work fine in Chrome and Firefox for Mac. I'm in the process of downloading a VM for IE 10 Windows 7. I'll test in that as soon as it's done installing. I'll download Opera as well and test in that too.

We'll get this whipped.

from jquery-mobile-icon-pack.

Alright. I downloaded the IE 10 VM and I can confirm that the icons are missing. The icons do however show in Opera 19.0 for Mac. I'll dig further into this.

from jquery-mobile-icon-pack.

Alright, after a long weekend of wrestling with SVG icons, I gave in and started using Grunticon, a Grunt task from @filamentgroup. I've reworked all of the icons, as well as the CSS files and it should be much better now. I've confirmed the icons to display in Chrome, Firefox and Opera for the Mac, as well as IE10 for Windows 7 (via VM).

The demo page has been updated with the new code, could I please get external confirmation?

from jquery-mobile-icon-pack.

First of all thanks heaps @commadelimited for all your hard work so far. It's much appreciated.

I can confirm that your demo page is working in Firefox, Chrome, IE, IE Mobile and Safari Mobile. I was also able to test it on a few newer Android devices. The icons appeared in these browsers.

Unfortunately I don't see any icons in Opera. Opera returns the following error:

[03/03/14 15:12:29] CSS - data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%227%2C5%207%2C0%200%2C7%207%2C14%207%2C9%2014%2C9%2014%2C5%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E
HTML style attribute
Invalid value for property: enable-background
Line 1:
  enable-background:new 0 0 14 14;
  --------------------------------^

Also the icons are not appearing on an older Android device (2.3.6).

I hope this helps.

from jquery-mobile-icon-pack.

@rthijssen which version of Opera? I'm using 19.0 for Mac and the icons load up fine on the demo page.

I don't have an older Android device with which to test, but can you tell me if the icons on this page show up for that device?
http://demos.jquerymobile.com/1.4.2/icons/

from jquery-mobile-icon-pack.

I tested it on the Linux version of Opera which is version 12.16.

When I previously tested an icon using the following CSS line it worked fine in this Opera release.

.ui-icon-glass:after {
    background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E %3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20500%20500%22%3E %3Cpath%20d%3D%22M474.051%2051.897q0%209.766-11.998%2021.763l-176.339%20176.339v214.286h89.286q7.254%200%2012.556%205.301t5.301%2012.556-5.301%2012.556-12.556%205.301h-250q-7.254%200-12.556-5.301t-5.301-12.556%205.301-12.556%2012.556-5.301h89.286v-214.286l-176.339-176.339q-11.998-11.998-11.998-21.763%200-6.417%205.022-10.184t10.603-4.883%2011.998-1.116h392.857q6.417%200%2011.998%201.116t10.603%204.883%205.022%2010.184z%22%20fill%3D%22%23FFF%22%20%2F%3E %3C%2Fsvg%3E ")
}

• Please note the %23FFF as the defined color

The jQuery Mobile demo site icons are appearing on the Android device.

It would be great if somebody can verify that the icons are not working on Android 2.3.6 devices.

from jquery-mobile-icon-pack.

@commadelimited I think it might have something to do with the .ui-nosvg not working on the demo site. I just added the png fall back to my local test and the icons seem to work on Opera and the older Android device.

from jquery-mobile-icon-pack.

Given that the title of this issue specifically relates to IE, I'm going to close this as completed. If Android is still a problem please open a new issue for that please.

from jquery-mobile-icon-pack.

For me it works on all android browsers: native, opera, chrome, firefox.
It works also on windows: firefox, chrome, safari, IE9-10
BUT IT DON'T WORK on OPERA FOR WINDOWS
I just experimented with your demo page

from jquery-mobile-icon-pack.

Okay @frankabbruzzese, would you open a new ticket for Opera for Windows support please? Include OS version and browser version.

from jquery-mobile-icon-pack.

@commadelimited,
Before opening the ticked I will setup another experiment. Maybe the problem is your demo web site and not the icons, because opera actually "freeze" once your demo page is loaded, while with the previous icon version the demo web site loaded normally(without showing the icons...hough)

from jquery-mobile-icon-pack.

Yeah. There are a lot of icons there.

from jquery-mobile-icon-pack.