I'm trying to apply some CSS3 transitions on some headers in a website I'm working on, but there's something about transitions on elements that contain text that really bugs me: in browsers that apply hinting or grid-fit a font's glyphs (which I guess is most of them, bar perhaps Safari), there is a noticable 'jump' at the beginning and end of a transition where you can see that text is snapped back to the pixel grid, as demonstrated in this jsfiddle: http://jsfiddle.net/8csA9/20/ (part of this is probably a momentary 'blur' due to filtering, but there's definitely some shape modification going on here, at least in FF and Chrome)
Normally I'd not even consider messing with the intricacies of font-rendering, but considering the glyphs are so large I feel that it doesn't really matter in this case, and was wondering if there is either a way to disable hinting, or some other way of making these transitions a bit smoother. Does anyone know if this can be done, and how?
PS: This question actually extends a bit beyond just transitions, just applying a static rotation also makes at least Firefox continue to hint the text, and the result ends up looking rather.. odd
PPS: There does seem to exist (or have existed) a '-webkit-font-smoothing' property, but the CSS3-fonts draft appears to have dropped the rule it was based on (font-smooth), and it seems it only ever worked on Chrome for the Mac
Use backface-visibility: hidden;
**Update: webkit moz mz and the standard
http://jsfiddle.net/jugularkill/58S2z/4/
More on backface visibility:
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
This worked like a charm for me. I added "backface-visibility:hidden" (plus major browser prefixes) to the elements with the transition property, and it fixed the jump/jitter I was experiencing during the transition. I tested in Firefox, IE (9/10) and Chrome.
One thing I noticed though: Make sure you add the property to the element's natural state, as opposed to the pseudo-class (e.g. hover, active...) of an element.
For me I found that I needed to add both backface-visibility: hidden and transform-style: preserve-3d to the element that contained jumpy content.
For example:
.element-with-jumpy-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
If you're using Bootstrap you can use this class:
.backface-visibility(hidden);
Adding transform: translate3d(0, 0, 0); or transform: translateZ(0); often helps to fix transition bugs, because it forces browser to use hardware-accelerated 3D transitions.
Related
I did setup an HTML page where I use z-index to set the elements "visual" order.
It works as expected; but breaks when I use transform: scale().
#blocks-both{
transform: scale(0.9);
}
I make a simplified example here : http://codepen.io/anon/pen/LNYrar
I read a lot of messages regarding this particular problem, but I can't find a solution to make my design work.
I guess I don't understand something regarding this.
Could someone help ?
Thanks !
This is a known issue:
css z-index lost after webkit transform translate3d
webkit-transform breaks z-index on Safari
webkit-transform overwrites z-index ordering in Chrome 13
You can read more about it here as it offers in depth explanation.
In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
You could avoid this issue by moving the transform properties from #blocks-both to #block-main and #block-sidebar like this:
#block-main, #block-sidebar {
transform: scale(0.9);
}
#block-main {
transform-origin: 100% 0;
}
#block-sidebar {
transform-origin: 0 0;
}
I've also edited your example.
I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
I've run into a problem where the up/down spinners are not showing in my <input type="number"/> elements when using bootstrap 1.4. The spinners are still there: you can click them to increase/decrease the number, even though they're not visible.
I think I've narrowed it down to the following CSS declaration. See http://jsfiddle.net/tKTRx/1/.
input, textarea {
-webkit-transform-style: preserve-3d;
…
}
What does this styling do? Is there a way I can work around it? (It doesn't seem to be a problem in later versions of bootstrap, but I can't upgrade quite yet).
This is a webkit bug that has been fixed in Chrome Canary. You can read more about the issue on the bootstrap github page: https://github.com/twitter/bootstrap/issues/630 but the way to fix it is to add a style:
input.flat, textarea.flat {
-webkit-transform-style: flat !important;
}
and then when you have a input/textarea add the class flat.
The reason for that property, assuming you're not actually doing any 3D transforms, is to get the browser to use hardware accelerated rendering for CSS transitions, transforms and animations. If you're not doing any 3D transforms then it's safe to remove, it may impact performance of 2D transforms on iOS devices.
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.
I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.
Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.
Wish I had more information, but maybe someone else has run into a similar problem.
.swatch {
-webkit-box-shadow: #EFEFEF 2px 2px 0px;
-webkit-transform: scale(1);
-webkit-transition-duration: 0.2s;
border: 1px solid white;
position: relative;
z-index: 1;
.swatch:hover {
position:relative;
z-index:10;
transition-duration: 0.2s;
transform:scale(1.8);
-webkit-transition-duration: 0.2s;
-webkit-transform:scale(1.8);
}
It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.
Any thoughts are appreciated.
I've had success adding
-webkit-backface-visibility: hidden;
to the offending element (.swatch in your case).
However, test it in older versions of Chrome and Safari to make sure it doesn't break anything else. In my experience, Safari 4 specifically isn't a big fan.
I had the same problem at this morning. But I found an answer on the web few moments ago.
To prevent the Blink issue, put the follow property on your .swatch class (not on :hover):
-webkit-transform-style: preserve-3d;
Try changing position:relative to position:absolute, and/or specify position attributes (top: x, left: y.
No idea if it will work, just throwing it out there.
when mouse over the images(img:hover) in chrome works fine. you can use like this
.swatch img:hover
http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/
I had the same problem try using opacity instead of z-index
img:hover{
opacity: 0;
}
On a different subject, I had the same effect (the awfull blink).
However, it wasn't on hover principles. It was on a dragable area, I wanted as smooth as possible on iPad. The area was originally moved with a css margin-left property.
Then, I used -webkit-transform':'translate3d(X, Y, Z)' for the smooth rendering, which is the case.
BUT, the use of translated3d made the famous blink, on the first drag (on iPad only).
Thanks to Fábio ZC, the -webkit-transform-style: preserve-3d; worked perfectly to get rid of the blink
For those who wants to know more about the -webkit-transform-style: preserve-3d and what is involved.
Back to the original problem, these are my thoughts:
You mention Safari & Chrome (so, webkit). Is the problem only on those browser? Which would lead to -webkit suspicious properties.
If so, -webkit-backface-visibility: hidden; or -webkit-transform-style: preserve-3d; are still good candidates to be tried:
Did you attach them on the .swatch class? (not hover state, otherwise, they will be considered too late, as the animation will be played directly)
You stated that the whole page is blinking? Strange as only the swatches should be impacted.
I deleted this line from the hovering class:
"display: none;" and amazingly, that worked. Try it and hope it solves your problem.