La imagen se mueve al arrastrar

En Chrome funciona bien, pero no en Firefox, como se puede ver en el JSFiddle . El problema es que la imagen al lado del jugador se mueve cuando el jugador es arrastrado.

Aquí está el CSS:

.player { color: #000; background-color: rgba(40, 180, 40, 0.8); padding: 5px; border: 2px solid #000; border-radius: 50px; display: inline-block; } 

¿Cómo hacer que funcione en Firefox también?


Pregunta extra: para mantener la imagen un poco separada del jugador (en ambos navegadores), uso un espacio en blanco después del jugador. Sería bueno si pudiera con CSS solamente.

También obtengo este problema en FF 40.0.3 cuando ejecuto tu violín. Probablemente esté relacionado con un error más antiguo dentro de jqueryUI, ya que establece un ancho / alto explícito en el elemento al realizar un arrastre. Este error parece haber vuelto a aparecer en las últimas versiones. Trate de usar jQueryUI versión 1.11.1.

Para separar el texto / la imagen, eliminé el intervalo adicional alrededor de la etiqueta img (no puedo ver qué bueno hace ese intervalo adicional) y agregué un margen a la clase alignPic.

Compruebe esto http://jsfiddle.net/pk58tu36/2/

 .alignPic { vertical-align: middle; margin-left: 8px; }