Rendu d'image/de position différent sur l'iPad

Question

J'ai une div qui a l'une des deux positions d'arrière-plan pour une image d'arrière-plan d'image-objet en fonction de la classe définie pour la div dans un script php.

Le CSS, qui est ci-dessous, fonctionne très bien sur les navigateurs standard, mais sur l'iPad, je ne vois pas la même chose. Au lieu de cela je vois plus de l'image de fond que je veux. Comme vous pouvez le voir sur l'image ci-dessous, plutôt que de simplement voir une étoile, je vois aussi une partie d'une autre étoile.

Comment puis-je obtenir la position d'arrière-plan/image à la bonne place sur l'iPad?

.normal, .favourite { 
    width:18px; 
    height:17px; 
    margin-right: 4px; 
    border:none; 
    cursor: pointer; 
    display:inline-block; 
    vertical-align: middle; 
    background-color:transparent; 
    background-repeat: no-repeat; 
} 

.normal { 
    background-image: url('/images/playlist_sprite.png'); 
    background-position: left bottom; 
} 

.favourite { 
    background-image:url('/images/playlist_sprite.png'); 
    background-position: right bottom; 
} 

Answer 1

Plutôt que de définir la position d'arrière-plan à l'aide d'essayer gauche/droite/bas définissant exactement en utilisant des pixels.

par exemple. Aussi, assurez-vous que ces deux images dans l'image-objet sont exactement 18px par 17px comme c'est ce que la classe dit la taille de l'image sera

background-position: XXpx XXpx; 

.