I have a background image that has a parent div with a transform: scale with an animation applied to it, giving the effect of the background image zooming in slowly when you land on the page.
It renders perfect accross the board except in ie 10/11. I've got all the proper pre-fixes added in, but still get a really shaky and choppy animation in ie.
I've researched and applied acceleration hacks, but nothing gives.
Does anyone have a fix or has seen something along these lines?
Thanks!
I had the same problem, but just with an image, not background image, and for me the solution was to give transform: rotate(0.01deg); to the parent of the scaled element.
Of course you will have a minimal rotation, so it depends on your css codes, if this wouldn't cause another problem.
Most likely it's because it's an image and there are not "in between" pixel renderings when doing transforms. I'm not sure there's a solution to this problem right now.
You could try doing it in canvas, though I know that's usually not the desired route to go.
Related
I have a issue that text is pixelated when 2D scale of CSS transform is applied. (I only tested in Chrome. I'll do cross-browsing later, so you don't need to test it on different browsers.)
CSS
.versus_block_hover
{
-webkit-transform: scale(1.2,1.2)!important;
-webkit-transition: 50ms 0ms!important;
z-index:1100!important;
border-width:1px;
border-color:#000;
border-style:solid;
}
Javascript Code
$('.versus_block').hover(function() {
$(this).addClass('versus_block_hover');
$(this).parent().css('z-index','1100');
}, function() {
$(this).removeClass('versus_block_hover');
$(this).parent().css('z-index','0');
});
I know that Chrome uses bitmap operation during CSS transform for 3D acceleration.
However, when I tested it in jsfiddle, it wasn't pixelated. In face, it seems that Chrome re-draws a text when the transition is done.
See this working example. Hover over a box. (I put all CSS elements from my actual site.)
http://jsfiddle.net/eCkdE/11/
And, this is an actual site that has an issue. (Hover any of blocks, then you can see pixelated fonts when it's expanded)
http://jsfiddle.net/GJ7BM
Anyone has an idea how to fix it? It's okay that you can fix it on my jsfiddle directly.
The problem seems similar to this: http://code.google.com/p/chromium/issues/detail?id=119470
So what actually triggers the problem, is when the element is rendered as a comsposited layer on uneven coordinates. If you enable the Composited render layer borders option in chrome://flags you can see that in your first jsfiddle example the div becomes a composited layer while the transition is in progress, the text becomes blurry, once the transition is complete it's no longer composited, and the text becomes clear (see this modified fiddle where it's easier to spot the border: http://jsfiddle.net/kF2Q5/).
In your second jsfiddle example the text stays blurry even after the transition is complete because it's still an composited layer (on uneven coordinates presumably), this is caused by these lots of nested and underlayed transforms (an element that lies above a composited layer, becomes a composited layer too). See this modified fiddle: http://jsfiddle.net/PqPSU/ All transforms are being disabled using:
* {
-webkit-transform: translateX(0) !important;
}
So only the transform on the hovered element is left. If you have enabled the Composited render layer borders option, you should see that all the red/brown borders around the tiles, indicating composited layers should be gone. And you should see that the text becomes clear once the transition is complete, just like in your first example.
Unfortunately I have no solution for the underlying problem, ie the blurry rendering of composited layers, I guess it's something that cannot be solved on this end, but can only be fixed in the rendering engine and/or the graphics card driver, depending on where exactly the problem is caused.
You can adjust the text-rendering css property.
https://developer.mozilla.org/fr/docs/CSS/text-rendering
But your example works fine for me, check on another computer.
You should update your browser, or your graphic card drivers.
I should preface this by saying that I am brand new to the world of SVGs. I'm playing around with a rather simple experiment using SVGs and CSS3 animations.
I have created the SVG in Inkscape and saved it as a plain SVG. I've then put it into HTML to play around with some CSS3 animations.
As you can see from my link below the whole SVG bounces strangely, this can be removed by removing the .arm class from the CSS. (which stops the single red circle group that has an arm class).
The problem is that I want the red circle groups to animate (spin) whilst the entire larger group is also spinning.
Any ideas or blatant things I may be doing wrong? (I do realize it's not the best SVG but I was just experimenting).
http://codepen.io/Fernker/pen/cwvfB
Note 1: After playing around a bit more if I remove either .arm or .center CSS rules then the wobble stops, but together they produce the wobble.
Here I fixed it for you (kind of).
http://codepen.io/anon/pen/unmfE
Basically I hacked it so it works, but you'll need to wrap your SVG in another container and have that rotate from center. If you animate too far down the nest, it will be affected by siblings.
It looks as though the shape is not creating a perfect circle when spinning, therefore shifting the center whilst spinning causing the wobble.
I am using transform CSS property to rotate text but the seems to come differently in different browser, I tried it with different fonts it doesn't come smooth.
is their a way i can make it smooth. link for image
jsFiddle example
a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. that's all i got for you. makes it a bit smoother.
http://jsfiddle.net/nicktheandroid/5Ytnj/
When I add -webkit-backface-visibility: hidden; to the .circ element, it causes it to stay pixelated even after the animation is complete.
I'm wondering if there's a way to get it to not pixelate while animating.
I've viewing it in the dev version of Google Chrome.
Okay so i think i've come up with a work around;
essentially; don't use "scale". use "scale3d" and have it setup so that the largest you want the image is scale3d(1,1,1).
Here is an example with the circle thing you had in there. I changed the scale to 5, because i didn't want to put 0.222222222222222222222222222222222 into the scale3d func...
[edit] So i tried the jsfiddle demo again, on a computer with no hardware acceleration, and the pixelation effect was gone. So it seems that it's the same problem as with scale3d where it converts it into a texture and then scales it. you can do as in the circ3 div here.
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.