I'm working with Ionic 2 and trying to perform a very simple css transition on a certain element:
.element {
-webkit-transition: all 0.5s ease-in;
width : 200px;
}
.transition {
width : 500px;
}
This looks great on the browser, but when tested on device (iPad) it looks very flickery and not smooth at all.
Is something wrong with my iPad or this is a known issue?
How can I make things go smooth?
Thanks
This is probably because your iPad doesn't have as much CPU resources as your PC. One way of making it smoother is making the transition longer. And fade transitions are faster than resizing ones.
Related
On iOS chrome and safari, this looping animation that works just absolutely beautifully on desktop gives me a nasty flicker on mobile. I plan on using pictures in front of a background for the final, so I do need to maintain some sort of background color. Can anyone help me get to the bottom of this? It's driving me nuts!
https://codepen.io/tylerwiegand/pen/OJVXoGV
.infinite-scroll-container {
transform: translate3d(0, 0, 0);
animation: infiniteScroll 5s linear infinite;
width: max-content;
}
I've done the standard searches, found a few related issues, tried the backface-visibility thing, no dice. I've seen other infinite animations that don't have this problem, so I assume there is a way to fix it, I just haven't thought of it! Thanks everyone =)
In the latest version of Chrome browser (Version 33.0.1750.1170), I have animations that have stopped working all of a sudden.
Site: http://multipurpose.joostrap.com/
There is an area for Testimonials that should transition in some div's.
i.e.
<div class="testimonial-box fadeInLeft animated">
I thought the issue might be #-webkit-keyframes in the CSS file, but it doesn't look to be this.
Is anyone else having this trouble with the latest Chrome browser or maybe have a fix?
EDIT:
I have changed the site to use the un-minifeid css version of the css. The relevant files are 'animations.css' and 'combined.css'. Hope this helps.
Simple answer
I think you are trying to get stuff to fade in from 0 opacity with a bit of a slide, no?
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
What you need to add is animation-fill-mode: forwards so that it sticks on the last frame of the animation.
You can see an example (webkit only) here on jsFiddle.
Explanation
When you run an animation in CSS, the browser will automatically return the element to the state it was in before the animation. This can be frustrating and not always intuitive.
So what you were seeing wasn't that the animation wasn't running (it was), but that by the time you scroll down it had finished animating and put it back to its original state (with opacity set to 0).
So you have two options:
You can remove the opacity from the CSS. Problem is that it might 'flash' before starting the animation. This wouldn't be a problem in your case since the content is below the fold to begin with. But it's bad practice because that might be an issue with future similar implementations.
The other is to leave the element as it appears in the last frame of its CSS animation. This is why I proposed animation-fill-mode: forwards. This does exactly that! I suppose this isn't the default because it might require more memory consumption but I haven't seen any evidence to prove it (not that I've looked for it).
As An Aside
Regardless, nobody will see your animation as it's below the fold. I suggest you detect how far the user has scrolled, and add that animation property once the user has reach the Testimonials. This way, it will only "fadeInLeft" when the user can see it!
You can use this code to do this: http://jsfiddle.net/R2YD9/2/ (Requires jQuery)
I'm using a reasonably simple CSS transition to create a box that 'flips around' by transitioning two divs 180deg at the same time. When you're on the 'back' of the box, it should be slightly transparent so you can see the underside.
I've got this working fairly easily in all browers, except the latest Safari 7 and on iOS 7. On Safari 7, the animation flickers and the back card just 'pops' to the front at the end of the animation.
This seems to be a bug in the rendering of the animation on newer Safari. Is there a workaround to get this to behave better?
Check out gifs of the animation on Chrome and Safari
See a demo here http://cssdeck.com/labs/flippable-card
Can not test on safari, but a similar bug happened time ago in Chrome.
The solution in that case would have been to move the back 1px in z
.card__back {
transform: rotateY(180deg) translateZ(1px);
backface-visibility: hidden;
}
.card--flipped .card__back {
transform: rotateY(0deg) translateZ(1px);
}
This happened in Chrome because while animating, the spatial order was calculated (I mean, the position of elements in 3d space), and it overrides other factors.
Once the animation is over, that calculation system is no longer used.
As I said before; cann't test in Safari, so I can be sure that this is a solution.
So I managed to replicate the behaviour in my current Safari and thought it was quite interesting.
Here's what I've come up with:
http://codepen.io/anon/pen/usGCL
Basically the backside is already turned around through a -webkit-transform: scaleX(-1); right from the start.
That way you don't have to rotate it back to 0deg.
Now instead of flipping front and back, You just flip the whole container by 180deg, leaving the backside appearing "normal" again. Also the z-index has to change in the process, which makes backface-visibility: hidden; redundant. I guess if modified a little you could use even less jQuery of course.
EDIT
Guess Aperçu's answer is also pretty much what you were looking for.
Just for fun though: http://codepen.io/BenMann/pen/DmjHv
And I agree the backface-visibility is definitely causing the problem.
As mentioned in the question, there are two things happening:
1. The animation flickers: this is due to the click delay in mobile browsers. Basically, a click event fires 300ms after physically tabbing the element. You'd want to listen for touchstart which fires immediately on tabbing, but doesn't fire at all on non-touch interfaces (Fastclick is a nice polyfill that removes this click delay in mobile browsers, but doesn't affect non-touch UIs.)
For the sake of this answer, I'm simply going to bind my listener to touchstart instead of click (therefore, the demo is to be viewed on a touch device):
$('.card').on("touchstart", function() {
$(this).toggleClass('card--flipped');
});
2. The back card just 'pops' to the front at the end of the animation: after some experimentation, it seems that this happens when transform and backface-visibility are both defined on the same element. To work around that, I've kept the backface-visibily on .card__back, but put the transform: rotateY(180deg) on .card__front.
Therefore, .card__front is going to be flipped initially, which means that .card has to be initially flipped as well to compensate for that.
We must also define transform-style: preserve-3d on .card in order for the transform to render .card__front and .card__back in 3D space (as opposed to being flattened).
/* Relevant CSS */
.card {
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-180deg);
}
.card__front {
transform: scaleX(-1);
}
.card__back {
backface-visibility: hidden;
}
.card--flipped {
transform: rotateY(0);
}
Mobile DEMO (to be viewed in mobile Safari or Chrome): http://jsbin.com/aMAwezA/15/
DEMO (for non-touch devices): http://jsbin.com/aMAwezA/16/
EDIT:
After further testing, I found that transform: rotateY(180deg) on .card__front was causing some flickering in Chrome. Replacing it with transform: scaleX(-1) solved the issue. Updated the CSS and demo link above which should work on both mobile Safari and Chrome.
You need to add two transition time, one for the -webkit-backface-visibility and another for -webkit-transform.
If you try to set the transition delay at 0secs, you will see the color change immediatly like you want to.
Try to modify your transition rule like
transition: -webkit-transform 1s ease-in-out, -webkit-backface-visibility 0s ease-in-out;
Or to override the 1sec transition only for the backface-visibility.
EDIT
Without using -webkit-backface-visibility which seems buggy, I think I've got something work playing with the display of the backcard.
See Demo (Tested on Safari 7 iOs 7.0.2 and Mavericks)
When you apply a -webkit-filter and a -webkit-transition to an Image and change the filter on hover, the image transition does well, but then the image gets really fuzzy.
Note: This only happens on Retina-Displays — no problem at all with 'normal' ppi-displays, but fuzzy on for example a new MacBook Pro with Retina Display.
My CSS (without vendor-prefixes):
img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}
Note: to see the effect/bug, I've set the transition-duration to 2 Seconds
Check out my Demo: http://jsfiddle.net/dya2t/7/
How can I fix this?
EDIT: If I set the :hover-state to filter:none its sharp! :-) BUT of course the transition does not work anymore :-/
As soon as there is a filter on an image (even if the value is 0 or 0%), the image gets fuzzy on retina displays (with or without transitions … its just blurry, all the time). I guess this is a Filter-Bug.
This is a known Bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=93471
I managed to get around this issue by applying to the img tag:
-webkit-transform: translateZ(0);
http://jsfiddle.net/78qbn/3/
Child elements with -webkit-backface-visibility: hidden; will resolve this.
http://codepen.io/amboy00/pen/Bxbrd
Joined stackoverflow to let others know since I had to find this out myself:
this bug also manifests (but differently) when trying to print images in chrome. They turn super pixelated!
If you throw a -webkit-filter onto a PNG in chrome regardless of printer or print settings, it prints the image/s at the right size, but downsampled to under 70 dpi. It's visible in the print preview too.
-webkit-transform: translateZ(0); fixed it.
Meatspace repro: prints of same stack of PNGs with & without fix
I'm trying to set up a css animation that will work in Chrome, Firefox, Safari and Opera to animate the width of some coloured bars back and forth while retaining the overall width to fit the page.
I set up a demo at http://codepen.io/marblegravy/pen/rxhym
If you open it in Chrome, it works exactly as I want with it sticking to the edges of the page (whatever the width so it will work in a responsive layout).
In Firefox, Safari and Opera however, it appears that the animation-timing-function: linear; or the linear declaration in animation: bulge4 7s infinite alternate-reverse linear; isn't taking effect and the whole thing scales back and forth.
I am using Prefix-free to shortcut the coding on Codepen, but I don't think that's where the problem is.
Any ideas?
You are animating the width trough CSS Tricks/Hacks. As CSS is interpreted different across browsers it will give different results. Also because this is a trick all browsers will interpret it on their own way.
You could make an simular setup trough jQuery Ui. For example animate can also scale sizes of elements, colors etc. In my opinion this is an better and more solid alternative then using CSS Tricks.
More information can be found at http://jqueryui.com/docs/animate