Google Autocomplete pac-icon blurred in IE

Question

Thanks to SO I was able to find out how to style the Google Autocomplete dropdown. I have changed the default marker to:

.pac-icon { 
  background-image: url(images/marker_greyed.png);
  background-position:center; 
  background-repeat:no-repeat; 
  background-size:16px 20px; 
  border:none; 
}

This is working great to change the icon. However, I'm facing an issue with good old IE, in that the marker is slightly blurred for the first few suggestions:

Compare this to Chrome:

Does anyone know what I can do to sharpen the background image in IE? I've tried pre-loading the image, thinking that it's maybe because the image is hidden on page load, but this isn't working either.

Many thanks!

I had a similar problem with background images in IE11 http://stackoverflow.com/questions/20093634/blurry-background-images-after-update-to-ie11 — wf4, Sep 29 '14 at 13:26
I don't see the image at all in your fiddle - but its interesting that its working in your fiddle. I would guess that its going to be a problem with CSS inheritance as was the problem that I had, one of the parent elements had a `border-radius` which caused child background images to have a blur. — wf4, Sep 29 '14 at 14:02
yep this is gonna be too complicated as trying to alter .pac-icon messes up the dropdown on mobile browsers. this, coupled with my IE problem, meaning I'm gonna have to hire a freelance guy for this tweek. Thanks anyway guys!!! — luke_mclachlan, Sep 29 '14 at 14:11

score 1 · Accepted Answer · answered Sep 29 '14 at 15:51

ok so I decided to upgrade my brain and do some decoding, based on some Googling about being able to inspect elements using Chrome.

The marker is enclosed in the following span:

<span class="pac-icon pac-icon-marker"></span>

and the corresponding css styling is:

.pac-icon-marker {
  background-position: -1px -161px;
}
.pac-icon {
  width: 15px;
  height: 20px;
  margin-right: 7px;
  margin-top: 6px;
  display: inline-block;
  vertical-align: top;
  background-image: url(//maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
  background-size: 34px;
}

note that using a mobile browser, they make one change and that is to the .pac-icon styling, which is as follows:

.hdpi .pac-icon {
  background-image: url(//maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png);
}

so what I've done is copy and paste these elements to my stylesheet, edited them to allow for my background image, uploaded the stylesheet and hey presto the new marker is working both in IE and on mobile browsers.

I have tested these changes via the chrome emulation facility and they seem to be working on iOS and Android devices.

Google Autocomplete pac-icon blurred in IE

1 Answers1