Chrome 10: wrong icon displayed

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Chrome 10 (windows/linux)
2. jstree with ajax load (json), types plugin with several types defined with 
different icons
3.

What is the expected output? What do you see instead?
Tree with icons matching the rel types specified. Instead it shows the same 
icon everywhere. When I hover over one of the faulty icons, it does show the 
right one. Once I have clicked on a faulty icon, the problem seems to be gone 
until the tree is refreshed.

What version of the product are you using? On what browser?
Latest jstree checkout as of today. Chrome 10.0.648.133 on Linux, 10.0.648.151 
on Windows.

Please provide any additional information below.
IE/Firefox/Safari/Opera render properly. I think this problem appeared in 
version 10 of Chrome. I don't understand why this is happening though and it is 
very annoying.

Here are the relevant parts of the tree:

        'json_data': {
            'ajax': {
                'url': function (n) {
                    p = 'tree/fetch/';
                    if (n.attr) return p + n.attr('id') + '/'; else return p;
                },
                'cache': false,
                'async': true,
                error: function() { alert('Error loading tree :('); },
            },
            'correct_state': true,
        },

        'types' :{
            'max_depth' : -2,
            'max_children' : -2,
            'types' : {
                'cld': {'start_drag' : false, 'icon': {'image': '{{MEDIA_URL}}images/icons/cld.png'}},
                'zne': {'start_drag' : false, 'icon': {'image': '{{MEDIA_URL}}images/icons/zne.png'}},
                'cls': {'start_drag' : false, 'icon': {'image': '{{MEDIA_URL}}images/icons/cls.png'}},
                'nde': {'start_drag' : false, 'icon': {'image': '{{MEDIA_URL}}images/icons/nde.png'}},
                'dmn-stopped': {'start_drag' : true, 'valid_children': 'none', 'icon': {'image': '{{MEDIA_URL}}images/icons/dmn-dn.png'}},
                'dmn-started': {'start_drag' : true, 'valid_children': 'none', 'icon': {'image': '{{MEDIA_URL}}images/icons/dmn-up.png'}},
                'dmn-suspended': {'start_drag' : true, 'valid_children': 'none', 'icon': {'image': '{{MEDIA_URL}}images/icons/dmn-sd.png'}},
            }
        },

Original issue reported on code.google.com by krims0...@gmail.com on 24 Mar 2011 at 3:45

[GoogleCodeExporter]

Here's the json data:

[[{"data": {"title": "tf2"}, "attr": {"id": "dmn4", "rel": "dmn-started"}}, 
{"data": {"title": "web"}, "attr": {"id": "dmn5", "rel": "dmn-started"}}, 
{"data": {"title": "i32"}, "attr": {"id": "dmn6", "rel": "dmn-started"}}, 
{"data": {"title": "spl-dev01"}, "attr": {"id": "dmn7", "rel": "dmn-stopped"}}, 
{"data": {"title": "ubutest"}, "attr": {"id": "dmn8", "rel": "dmn-stopped"}}]]

I have noticed Chrome is actually not downloading the dmn-stopped icon, only 
the dmn-started icon. When I click on the node that should have dmn-stopped, it 
does download it and display it.

Original comment by krims0...@gmail.com on 24 Mar 2011 at 3:56

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I think the bug is in chrome.

Did some quick-fixing in jquery.jstree.js

Where the css is generated that assigns the background-image for the different 
types, i have added an additional ", .rel"+i  css selector. Then I added an 
additional class to the <ins> tag if a attr.rel is available.

This makes it work under chrome.

Hope this helps.

* keep up the good work! *

File is attached, but I only added the extra css class in the Json module, not 
elsewhere..

Original comment by rene.vae...@gmail.com on 28 Mar 2011 at 10:35

Attachments:

• jquery.jstree.js

[GoogleCodeExporter]

I seem to have this behavior too, in Chrome 10.0.648.204.
(Type icons are flickering on hover.)

Original comment by estee...@gmail.com on 13 Apr 2011 at 3:29

[GoogleCodeExporter]

Confirmed: 10.0.648.205.

rene: I'm not following what you did? I saw your change for ", .rel"+i, but I 
don't understand your note about <ins> and extra class. Can you explain a bit 
more?

Original comment by djbillk...@gmail.com on 19 Apr 2011 at 11:21

[GoogleCodeExporter]

I have the same problem, the funniest is that it only occurs when I use plugin 
checkbox + types in chrome. I tried to do everything but I could'nt find a way 
to fix this "bug"

Original comment by goesme...@gmail.com on 2 Sep 2011 at 6:51

[GoogleCodeExporter]

the solution worked great, thx!

Original comment by mr.jo...@gmail.com on 2 Sep 2011 at 7:56