39

I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having.

I am using the Bones boilerplate to make a website, and it has been great, until now...

It uses fluid grid system and I have recently tried to create a simple gallery which I have made into a grid (4 images, each one wrapped in a quarter column, with first/last classes added to the first/last images).

If you hover over the images (especially noticeable on the first three for some reason), you will notice that they change width by a pixel or two for some crazy reason. The images are set to max-width:100%, and I have a feeling this is somehow the culprit, because if you give the images a "fixed" width (example .gallery-icon img {max-width:165px;}, it fixes the issue, but being a fluid grid system, I can't go down that route, as the images stay 165px if resizing the browser, and even if I set 4 different widths depending on media, in between media sizes, the images wouldn't align properly.

If it wasn't for the transition effect problem (if i turn the transition off, the images lower opacity fine, but no animation), it would work as I want it to work :(

Please help guys!

Here is a empty demo site that has the bones boilerplate running and nothing more than the gallery on the page. Let me know if you see the shaking issue.

(I couldn't recreate it on jsfiddle, so I installed it on an old domain I had lying around hehe)

EDIT: I have just noticed that the problem seems to happen to images that are bigger than the div in both width and height. Images 1 + 3 are this and they have the bug, whereas images 2,4 seem to be okay? and images 2+4 have a smaller height than the div..... But even if I set the images a max-height, the problem continues..

EDIT2: Added a quick video to show the problem (latest Firefox and Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw

Volker E.
  • 5,443
  • 11
  • 43
  • 62
user1202292
  • 543
  • 1
  • 5
  • 16
  • The demo seems to work fine @ Google Chrome v24.0.1312.57 – SeinopSys Feb 24 '13 at 12:12
  • Please check again, using Chrome on different pc's I am convinced it is not just a problem with my pc. Hover over images 1+3 on and off and really look at the right border of the images. It is subtle but when you have loads of images doing it on screen whenever a transition happens (flexslider slides a slide) it is noticeable and looks bad :( (i used same Version 24.0.1312.57 m) – user1202292 Feb 24 '13 at 12:15
  • I am seeing it on Chrome 24.0.1312.57 – McNab Feb 24 '13 at 12:20
  • Seems like there is a newer version of Chrome (25.0.1364.97), try updating. – SeinopSys Feb 24 '13 at 12:21
  • I just updated it and still persists, the problem also occurs in firefox. – user1202292 Feb 24 '13 at 12:24
  • I made a quick screencap, I don't see where the problem is. http://www.youtube.com/watch?v=SnkrFJ2Lu_E – SeinopSys Feb 24 '13 at 12:29
  • Thanks for showing that, you clearly don't see the bug then for some reason. I have made a quick screencap too, I edited the question to have the link, please check it out. – user1202292 Feb 24 '13 at 12:46

5 Answers5

100

Thanks to vals for pointing out the GPU aspect... This reminded me of this CSS-Snippet which tends to solve Chrome rendering issues:

-webkit-transform: translateZ(0);

I've applied this to the container (div.post) containing the problematic item (i.icon-) which has a fraction width, problem solved!

Credit: I've got this solution from this answer to fix incorrectly rendered (fixed) elements after navigating to an page anchor.

Community
  • 1
  • 1
2called-chaos
  • 2,908
  • 3
  • 19
  • 25
15

I would say that it is really a bug in Chrome (I am using 24.0.1312.57 m).

The issue is not really on images 1 + 3, I have seen it on image number 2.

I think that the issue arises when you have the width of the image being a fraction (say 146.71 px). In stationary display, this gets rounded to 146 px. In the transition this gets rounded upwards (more correctly !) to 147 px.

vals
  • 54,758
  • 10
  • 75
  • 124
  • That would make complete sense, and I have a feeling that this is exactly the problem. Very frustrating to realize but right! It would explain why setting a width to a round number (165px) fixes it. – user1202292 Feb 24 '13 at 20:28
  • Meanwhile I have checked that in Canary. The problem is also there, but disappears when you disable GPU acceleration. So, the problem would be different rendering when the GPU (for the animation) kicks in. – vals Feb 24 '13 at 20:32
12

use the following css hint to promote the affected element to a new composite layer (It solved the same exact issue to me):

.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}

This indicate the compositor to isolate the paint process of the element into a new composite layer. When inspecting layers in chrome dev tools you can make sure the element has been promoted, and thence the issue solved. The element will appear in a new layer with the following 'Compositing reasons: has an active accelerated animation or transition. Has a will-change compositing hint.'

Looks like after promoting the element to a new layer this way, the browser is able to render the final state of the transition correctly.

Ivan.

isaldarriaga
  • 193
  • 1
  • 6
  • 1
    This feature didn't exist at the time when this question was asked. But it does work now since Chrome 36 and FF 36 ([link](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility)). – rustyx Aug 13 '15 at 07:28
  • 1
    This answer is best - it doesn't require adding `-webkit-transform: translateZ(0)` to parent element. – ranquild Nov 16 '15 at 10:26
4

On thins link you can find solution for Mozilla bug.

You need to add 1 CSS rule:

-moz-backface-visibility: hidden;
Mr Br
  • 3,177
  • 1
  • 16
  • 23
1

I suggest using jQuery to handle your opacity rather than using the CSS3 attributes because you are correct in that your max-width is messing, unhappily, with your transitions. 

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

Using jQuery will fix a lot of these little glitches with transitions and make sure your opacity change is done cross-browser-compatibly (yes, I know that there are lots of tags for transitions for browsers, but there aren't attributes for all browsers.) :) Hope that helps!

Tammy Shipps
  • 726
  • 3
  • 13
  • Thanks for that tammy, very helpful indeed :) Reluctantly (I like css), I will have to go with jQuery. – user1202292 Feb 24 '13 at 20:29
  • Not a problem! I also prefer CSS, but not all bugs are ever ironed out, are they? Maybe one day! – Tammy Shipps Feb 24 '13 at 23:37
  • this method affects size of elements while animating in chrome. when the element is appearing, it is something like animating width and height from 0 to 100% – SalmanShariati Nov 12 '14 at 20:01