gachseang / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
0 stars 0 forks source link

Using a sprite for image icons with backgroundPosition fails in IE7 and IE8 #76

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
Demo link or sample code:
        var style = [{
            url: RAH.sprite_url,
            height: 41,
            width: 48,
            anchor: [14],
            textColor: '#FFFFFF',
            backgroundPosition: "-252px -264px"
        }];
        var markerCluster = new MarkerClusterer(gmap, markers, {
            gridSize: 60, 
            styles: style,
            maxZoom: 10
        });

What steps will reproduce the problem?
1. Make an image sprite by ganging up multiple images into one 
2. Point the URL of the style object to the sprite
3. Use the backgroundPosition parameter to position the sprite

Expected result:
The background images is displayed at full size and positioned properly. This 
works in Firefox, Chrome, and Safari.

Actual result:
The entire sprite image is scaled to width and height specified in the style 
object

Version: trunk

Browser / Operating System:
Tested on IE7, IE8 on windows. Chrome, FF, and Safari on MacOs

Additional comments:
The problem is around line 1210 where there is a sniff for IE (document.all) 
that then branches to use a CSS filter (AlphaImageLoader) for IE. Removing this 
branch and using background-image and background-position CSS rules for all 
browsers fixes the problem in IE7 and IE8. 

I'm using a 24 bit PNG with transparency (nice smooth dropshadow) and it works 
fine in IE7 and IE8, so I don't see the need for this code sniff. Maybe refine 
the sniff to only apply to IE6?

Note, I also tried changing the sizingMethod param on the AlphaImageLoader 
[image, crop, scale], but none did the right thing.

*********************************************************
Tip: Star this issue (next to title) to receive notifications of status
changes against this issue, also used as a gauge for how many people are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by jonles...@gmail.com on 29 Mar 2011 at 10:30

Attachments:

GoogleCodeExporter commented 9 years ago
I've removed the filter, don't really care about IE6 anymore :)

Original comment by lu...@google.com on 31 Mar 2011 at 5:58