img css top value changes when changing src attribute

Question

In my chess game website here , I have an image of a chess piece (a pawn) that can change after it gets promoted. I position pieces with absolute CSS positioning and give top/left values. For some reason, when I change the src attribute for a pawn upon promotion, the CSS top value gets changed.

In the link I gave, if you solve the puzzle by (spoiler) moving the top white pawn up one square and promote it to a knight, the piece gets moved back to the original square (strangely setting the image's top value to 0).

If you look my scripts (source-mapped to assets/js/mateinone.js ) and place a break-point at line 133, you can modify the src value (even via the elements/inspector tab of your developer tools), its top value gets changed as well!

Can somebody explain this behaviour?

Answer 1

The problem isn't on line 133, its on line 379 of mateinone.js. The _setPiece() method is resetting the original top value to the image. Change your logical so that it doesn't reset it.