CODEWITHSUNDEEP
htmlgoogle-chrome
Vaca
Vaca

Reputation: 75

Chrome issue when clicking on img inside a

I have a three year old website, which has been perfectly functioning, until now. The new version of the Google Chrome browser, v.41, experiences a strange bug: I have an IMG tag inside of an A tag, and when I click on it, the image randomly changes position instead of going to the where the link is linked. This only occurs with the latest Chrome, v.41. Older versions of Google Chrome and other browsers do not experience this problem. I have tried this on both Windows 7 and OSX 10.10

I copied the code to jsfiddle in case you want to look at it. I have not used any outdated CSS functions and there is no JavaScript used at all.

The linked image's code: 

<a class="insImg" href="#">
    <img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-mars.jpg" />
    Dům 1
</a>

I would just like to know whether there is something wrong, or if it is just this version of Google Chrome.

Upvotes: 1

Views: 193

Answers (1)

rlemon
rlemon

Reputation: 17667

As you've mentioned it looks to be a bug with Chrome.

I've played with the code a bit and this part seems to have been part of the issue: 

ul li img {
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
}

I don't understand why clicking on the anchor causes this positioning to be dropped, but as a quick workaround you can just move the positioning into the anchor like so: 

ul li a {
    text-decoration: none;
    -moz-opacity: 1;
    opacity: 1;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
ul li img {
    width: 150px;
}

See the updated fiddle below.

https://jsfiddle.net/2d4b1mLm/5/

Upvotes: 1

Related Questions