-webkit-transition-property: -webkit-transform, opacity; on webkit THINNING text

[carasmo]

When this is in the CSS for isotope, in webkit browsers (chrome, safari), the animations do its thing, but as soon as they fire, the text on the entire page becomes very, very, very thin and faded. This same thing happened with FlexSlider until I found out that in the js I changed the

//Test for webbkit CSS3 Animations
slider.transitions = "webkitTransition" in document.body.style;
Change the second line to:

slider.transitions = false;
I hope this works it for you. (I'm also open to better solutions :-)

Now the only thing that messes up the text is the isotope css -webkit-transition-property: -webkit-transform, opacity;

Any ideas on how to keep the movement and not have the thin, faded text?

[jracollins]

I'm glad its not just me that is having this problem, I only seemed to notice it when using an already thin(ish) font such as Helvetica Neue Light.

For me on Safari it starts off at the very very thin stage, but on Chrome it only changes the font to be thin after firing one of the filter animations. In Firefox, all works perfectly.

I hope this little bit of extra information helps to find a solution.

[carasmo]

I found that it's with elements that are positioned relative with a float and a z-index. Actually removing the position relative fixed this, but that made things not show up because they were to be above a div so I did some other stuff with the css and now it works. I noticed that it worked when the screen was in mobile view, but not in desktop view, so that's how I figured it out. What a pain. I wish Chrome was as good as Firefox.

[carasmo]

It's not the position relative, it's the z-index higher than 1 which appears to be the problem.

[carasmo]

Yeah, it's the z-index. I was able to change it back to my original css and just move one div in the html and then it works now without a glitch. Weird.

And I removed the z-index and/or made them no higher than 1. Higher than that and it won't work but it was just enough to put the content above the bg div that takes up the height of the design.

[carasmo]

This fixes the bug with flexslider in case you are using that too.

http://www.jasonbobich.com/theme-forest-updates/flexslider-css3-transitions-bug/

[jracollins]

Thanks so much for figuring this out, I had a suspicion it was something to do with the z-index as the font would flicker to thin and back to normal every time my slider changed slide. However I would have never guessed that a maximum z-index of 1 would be the issue.

You are right on it affecting any element on the page with a z-index of greater than 1. This means that now I can't have a sticky bar at the top of the page containing the filter buttons that floats above the isotope elements (would require a z-index of at least 2) without experiencing the text thinning within the bar. I wonder whether you have any ideas for a workaround?

[carasmo]

I really don't know. I try to make all things stacked in the html so that when it becomes small for tablets or mobile, the elements are in order and I don't have to do much to them with css, not even unfloat floats, since I do a mobile up design.

I tried this and it appeared to work:

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 4; --- changed this from 1 to 4
}

Then I used a z-index lower than this number on a z-index and the thinning didn't happen. I just tried it again with a 10 on this isotope-hidden.isotope-item and as long as the other floated, positioned relative has a z-index that is lower, the thinning didn't happen in chrome. Didn't check in Safari

[carasmo]

Let me know if this works for you too. I would like to write about this on my facebook page or my new blog.

[carasmo]

The z-index issue is with isotope, I don't know if it's the same with flex slider, but removing the css transitions in the jquery fixed my issue with the slider without changing the use of the slider. I'm going to play around with the un modified flexslider js and see if a z-index issue will resolve that without messing with the js. But that is for later.

[carasmo]

I couldn't wait, I replaced the old ver. 1.8 of flexslider without any modifications and added a z-index of 1, this removed the thinning of the fonts. Then I had to change the z-index of the absolute positioned control nav list items, which mine are above the slider

.flexslider {position:relative;z-index:1}

.flex-control-nav {position: absolute; top: 0;left:0;overflow:hidden;z-index: 2;}

This didn't screw up the isotope and now everything works great in chrome and safari with both the flexslider and the isotope on the page. I just did it with another slider, just as long as there is a z-index of 1 on the .flexslider, then the thinning doesn't happen.

[mandynicole]

Do you have a JSFiddle or something to look at to show what you mean by faded and thinning? It could have been an issue with the way the text is being rendered to begin with because of the opacity and transition effects. I've written about how I troubleshoot this issue here, let me know if that fixes it for anyone else in the future.

Edit: Just saw that this is possibly addressed in the documentation.

[JoelSutherland]

It's not an issue with z-index.

The issue is with the transforms. There are two anti-aliasing modes that webkit will use. One is subpixel and one is grayscale. Webkit only wants to animate/transform grayscale anti-aliased text but the default is subpixel;

To solve the issue, add this to your css:

html { -webkit-font-smoothing: antialiased; }

This forces grayscale antialiasing and you won't see the switching.

[carasmo]

Thanks! But when I fiddle with z-index, it fixes the issue. I don't like webkit-font-smoothing, makes text too thin for my taste.

[mandynicole]

Subpixel-antialias makes it thick. Antialias thins it out.

[Edit: Realized I had them swapped!]

[carasmo]

I stopped using either and now the typekit fonts, google fonts, and system fonts look the same in firefox, webkit, and opera. That what I want, the same.

[desandro]

The only sure-fire way to prevent the anti-aliasing of text is to disable transforms and transitions. See http://isotope.metafizzy.co/docs/help.html#css-transforms and http://isotope.metafizzy.co/docs/animating.html for how to do that.