image moves on hover - chrome opacity issue

Question

There seems to be an issue with my page here: http://www.lonewulf.eu

When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome.

My css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

It's best practice to put the hover on the A tag, not the image itself. — Diodeus - James MacFarlane, Oct 19 '12 at 18:22
Yes .img is a href class. Should I give it a different name? maybe now it conflicts with ? EDIT: Nvm, I changed the name from .img to .thumb and still having this issue. Any other suggestion? — zefs, Oct 19 '12 at 18:41
I don't see the thumbnails moving on hover - Chrome v.22. No, a class called `img` will not conflict with `img` elements: one is selected with `img {..}` the other with `.img {...}`. Your website made me laugh ;) — tuff, Oct 19 '12 at 18:58
Weird, using latest Chrome and they are moving on mine. It made you laugh, is that good or bad? First website I've uploaded on the web. — zefs, Oct 19 '12 at 21:16
using a translation on the Z axis was the only solution that worked for me: http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition/12820319#12820319 — Larry, Sep 04 '13 at 13:07

score 231 · Accepted Answer · edited May 23 '17 at 12:18

231

Another solution would be to use

-webkit-backface-visibility: hidden;

on the hover element that has the opacity. Backface-visibility relates to transform, so @Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.

See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.

edited May 23 '17 at 12:18

Community

1
1

answered May 30 '13 at 10:15

alpipego

3,178
2
14
26

This is the correct answer, but you have to say that the `backface-visibility` property has to be set on the `img` element. In my case, the element that has the opacity was the `a` element wich wrap the `img`, so your answer was not perfect for me. Btw, I also found this glitch on Firefox for Mac, so I suggest using every vendor prefixes. – Oliboy50 Jan 21 '14 at 14:55
1

@Oliboy50 Sorry, I have to argue that. Im my case, the faulty elements were mere empty `div`s with `background-image`. @alpipego Thanks for the solution! – bonflash Mar 24 '14 at 03:30
1

This worked for me but made my images look bad, pixellated instead of smooth. – Kieran Hunter May 27 '15 at 07:36
1

I don't know why it works, but I happened upon this and gave it a shot. This fixed a bug that kept coming up on my site for months now that I could never figure out. Thank you! – Shnibble Apr 14 '17 at 15:53
I also had to add a `z-index` to get the hover effect to work correctly for me. – Jack Aug 11 '17 at 13:45

score 34 · Answer 2 · edited Jan 22 '14 at 19:58

34

For some reason Chrome interprets the position of elements without an opacity of 1 in a different way. If you apply the CSS attribute position:relative to your a.img elements there will be no more left/right movement as their opacity varies.

edited Jan 22 '14 at 19:58

Dmitry Pashkevich

12,206
9
49
68

answered Oct 21 '12 at 04:52

Rick Giner

441
4
2

1

Does anyone know why this is? Surely it's not a hasLayout thing? – sidonaldson Feb 14 '13 at 10:29
8

Had the same issue in Firefox just now. Relative didn't fix it, but setting this on the element did - `transform: translate3d(0px,0px,0px);` – ConorLuddy May 01 '14 at 11:44
I had the same issue on Safari and `transform: translate3d(0px,0px,0px);` worked – zevnicsca Aug 31 '16 at 00:12

score 21 · Answer 3 · edited Mar 08 '13 at 16:03

21

I had the same problem, I fixed it with css transform rotate. Like this:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

It works fine in major browsers.

edited Mar 08 '13 at 16:03

DigCamara

5,352
4
33
45

answered Mar 08 '13 at 15:43

Beskow

211
2
2

1

Thanks for this. This fixed it in Firefox! :D – Hans Wassink Mar 28 '14 at 15:12
Yep me too. The backface trick didn't work for me (img inside a) but this one did! Thanks! – mikmikmik Oct 10 '14 at 13:04
This is the only answer that worked for me (Chrome). Thanks! – Kid Diamond Aug 16 '16 at 11:12

score 15 · Answer 4 · answered Nov 08 '16 at 17:21

Another solution that fixed this issue for me was to add the rule:

will-change: opacity;

In my particular case this avoided a similar pixel-jumping issue that translateZ(0) introduced in Internet Explorer, despite fixing things in Chrome.

Most of the other solutions suggested here that involve transforms (eg. translateZ(0), rotate(0), translate3d(0px,0px,0px), etc) work by handing painting of the element over to the GPU, allowing more efficient rendering. will-change provides a hint to the browser that has presumably a similar effect (allowing the browser to render the transition more efficiently), but feels less hacky (since it's explicitly addressing the problem rather than just nudging the browser to use the GPU).

Having said that, it's worth bearing in mind that browser support is not as good for will-change (though if the issue is with Chrome only then this might be a good thing!), and in some situations it can introduce problems of its own, but still, it's another possible solution to this issue.

This should be the accepted answer. Only this worked for me in Firefox 84.0.1 under GNU/Linux, unlike the other answers. That this bug is left unsolved after all this time is mind-boggling. — Vilinkameni, Jan 04 '21 at 20:50

score 10 · Answer 5 · answered Nov 15 '13 at 00:27

10

I was need apply both backface-visibility and transform rules to prevent this glitch. Like this:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

answered Nov 15 '13 at 00:27

Jamland

891
13
17

score 10 · Answer 6 · answered Sep 18 '15 at 00:45

10

I had a similar issue with (non-opacity) filters on hover. Fixed by adding a rule to the base class with:

filter: brightness(1.01);

answered Sep 18 '15 at 00:45

Juan Casares

338
3
7

Same issue with a filter transition on hover. This fixed it for me too. – Josh Harrison Jan 30 '17 at 17:51
Using filter: brightness(1); on the img element fixed it for me, thank you – Sai Sep 07 '17 at 14:58
this worked for me, had a 1px issue when applying grayscale filter on an image on hover. Why can't browser devs fix all those things finally? Why do I have to use backface-visibility and all that stuff.... – Varin Sep 20 '17 at 14:09
This fixes it, but the transition animation stops working – Amin Dec 20 '17 at 22:49

score 6 · Answer 7 · answered Jul 15 '14 at 14:24

backface-visibility (or -webkit-backface-visibility) only fixed the issue in Chrome for me. To fix in both Firefox and Chrome I used the following combination of above answers.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

score 4 · Answer 8 · edited May 23 '17 at 12:26

4

I encountered a similar issue in Safari 8.0.2, where images would jitter as their opacity transitioned. None of the fixes posted here worked, however the following did:

-webkit-transform: translateZ(0);

All credit to this answer via this subsequent answer

edited May 23 '17 at 12:26

Community

1
1

answered Jan 21 '15 at 19:50

James Fletcher

1,208
11
12

Tried all the other answers, this was the first one that worked! – Aug 28 '16 at 19:50

user2125009 · Answer 9 · 2014-01-26T23:13:15.837

I ran into this issue with images in a grid each image was nested in an that had display: inline-block declared. The solution that Jamland posted above worked to correct the issue when the display: inline-block; was declare on the parent element.

I had another grid where the images were in an unordered list and I was able to just declared display: block; and a width on the parent list item and declared backface-visibility: hidden; on the image element and there doesn't seem to be any position shift on hover.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

score 2 · Answer 10 · answered Apr 21 '14 at 19:51

The solution alpipego was served me in this problem. Use -webkit-backface-visibility: hidden; With this the image no move in hover opacity transition

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

score 2 · Answer 11 · answered May 28 '14 at 15:40

I had trouble with all the other solutions here, as they require changes to the CSS that may break other things -- position:relative requires me to completely rethink how I'm positioning my elements, transform:rotate(0) can interfere with existing transforms and gives wonky little transition effects when I have a transition-duration set, and backface-visibility won't work if I ever actually need a backface (and requires a whole lot of prefixing.)

The laziest solution I found is to just set an opacity on my element which is very close to, but not quite, 1. This is only a problem if opacity's 1, so it's not going to break or interfere with any of my other styles:

opacity:0.99999999;

score 1 · Answer 12 · answered Feb 14 '13 at 10:38

1

Having marked Rick Giner's answer as correct I then found out it did not fix the issue.

In my case I have responsive width images contained within a max-width div. Once the site width crosses that max width the images move on hover (using css transform).

The fix in my case was to simply amend the max width to a multiple of three, three columns in this case, and it fixed it perfectly.

answered Feb 14 '13 at 10:38

sidonaldson

20,187
10
47
54

1

Thanks for the comment, I also noticed relative position not always works as solution so if this issue appears again I will try your method too. – zefs Feb 14 '13 at 14:07

score 0 · Answer 13 · answered Mar 08 '17 at 10:56

0

I noticed you had opacity included in your CSS. I had the same exact issue with Chrome (the image moving on hover) .. all I did was disable the opacity and it was solved, no more images moving.

.yourclass:hover {
  /* opacity: 0.6; */
}

answered Mar 08 '17 at 10:56

cssninja

21
3

score 0 · Answer 14 · answered May 17 '18 at 00:28

0

Had the same issue, My fix was putting the class before the src in the img tab.

answered May 17 '18 at 00:28

Just Browsing

59
7

image moves on hover - chrome opacity issue

14 Answers14

Linked

Related