0

The Problem: The logo of my homepage (PNG format), is moving in a strange way in firefox (chrome works fine), while moving the cursor. It whobbles 5-10 pixel from left to right and back.

Under the PNG Image is the body linear-gradient background with background-attachment: scroll;

Notice: The image hovering works fine if the body background linear-gradient has the attachment fixed and if it is linear-gradient actualy. With normal background it even do not work too, also if the attachment is fixed.

I want to use linear-gradient and background-attachment: scroll;

The two examples in the comments do only work, because they have the background-attachment: fixed, as I listed in the css style here before. It was only for help to find out whats wrong, so i updated my post and make a fallback to attachment fixed.

If you want to see the problem please use PNG or GIF for the image and no placeholder.

Final question: Is there a way to have a PNG hovering through transition with opacity, while having a linear-gradient background for the body with background-attachment: scroll;

PS. backface-visibility: hidden; for the link or/and the image is not the solution!

FINALLY: After hours and hours, i found the solution here, below in the comment section. If you have the same problem, you have to use transform: translateZ(0); for the problematic image.

body {
  background: linear-gradient(#edf6fa, #fbfbe9);
  background-attachment: fixed; /*without it, the image whobbles*/
  background-attachment: scroll; /*but this is what i need*/
}
#toplogoimg {
  float: left;
}
#toplogoimg a {
  position: relative;
}
#toplogoimg img{
  opacity: 1;
  transition: opacity 0.3s ease-in;
}
#toplogoimg img:hover{
  opacity: 0.8;
  transition: opacity 0.2s ease-out; /*transition is the bad guy, but not the main problem, because as I said with background-attachment: fixed; for the body it works fine, but only if it is a linear-gradient background.*/
}
<div id="toplogoimg">
  <a href="index.html">
    <img src="http://placehold.it/180x180" />
    <!--The image src should be a PNG or GIF file. JPG works fine, but i need transparency.-->
  </a>
</div>
Community
  • 1
  • 1
Deva Store
  • 33
  • 9
  • Well Sir it works just fine http://jsfiddle.net/e8gbpw6w/1/ what version of firefox is that? – Gildas.Tambo Feb 03 '15 at 02:46
  • Looks good on me : http://jsfiddle.net/v3nom357/ Are you sure this is not browser problem? – Jun Rikson Feb 03 '15 at 02:55
  • I see no transition. Its all about it, from opacity 1 to 0.8. - I do not exactly know where the problem is, but firefox is up to date. – Deva Store Feb 03 '15 at 03:02
  • Try adding `z-index: 1` and `position: relative` to `#toplogoimg img`. – joshhunt Feb 03 '15 at 03:12
  • Also try `-moz-backface-visibility: hidden;` See http://stackoverflow.com/questions/23778588/images-with-opacity-jumping-on-hover-in-firefox – joshhunt Feb 03 '15 at 03:17
  • Thanks joshhunt, but unfortunately that was not the solution. I added both to the image and its still moving while hovering. I also tried z-index: 2 – Deva Store Feb 03 '15 at 03:19
  • I already found backface-visibility: hidden a few hours ago through google on this site and tried it. I tried it again now with prefix but nothing changed. – Deva Store Feb 03 '15 at 03:21

0 Answers0