I am developing this website and I have set of sprites and i am using those as per needs. Somehow, on some location my images are not sharp in chrome browser and working fine with other browser and even on mobile devices.!
How ever i am unable to post images because of some reputation issue from stack overflow. My images are round with background size of 400px auto with height and width of 50px both.
Magic things are happening like if I open other tab and come back to this one, images would be fine or if minimize the browser for 5-10 seconds and maximize, images will be fine. please help.
here is my css:
.banner-section .detail_choice .add_phn_call .choice_ico, .banner-section .detail_choice .add_phn_web .choice_ico, .banner-section .detail_choice .add_phn_directions .choice_ico, .banner-section .detail_choice .tickets_list .choice_ico,.banner-section .detail_choice .track_event .choice_ico,.banner-section .detail_choice .invitation .choice_ico, .banner-section .detail_choice .artist_follow .choice_ico, .banner-section .detail_choice .artist_news .choice_ico{
background: url("../images/details-sprite-new.png") no-repeat scroll transparent;
background-size: 400px auto;
background-position: 0 0;
height: 50px;
margin: 0 auto 10px;
width: 50px;
cursor:pointer;
}
and as per the requirement we give the background position for the particular image.