Has anybody experienced flicker effect like this?
I use Angular with ngAnimate module. Without ngAnimate there is no flicker but also other needed animations goes away. So I need to stay with ngAnimate but get rid of flicker.
Initial state of popup:
.fade-scale {
-webkit-transition: all .2s ease-in-out;
-webkit-transform:scale(0.8);
opacity:0;
}
On tap it adds this class on popup
.show {
-webkit-transform:scale(1);
opacity:1;
}
All of these don't help
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
Related
I'm trying to animate two images from a fixed position to side-do-side, using transition and transform/translation code.
It works right on Firefox / Chrome but on WebKit devices like iPhone and Safari it acts oddly. Basically the animation ends on the right place, but the transition don't.
.anim div{
transition: ease all 1s;
}
.anim div.transformed.a{
transform: translate(150%, -11%);
}
.anim div.transformed.b {
transform: translate(50%, -110%);
}
Here's a demo:
https://jsfiddle.net/0o8L1jg2/1/
On Safari the image goes all the away across and then suddenly sticks to the final position (which happens to be right). Any way to make the transition acts correctly on here?
Add the webkit prefix for webkit devices.
.anim div{
transition: ease all 1s;
-webkit-transition: ease all 1s;
}
.anim div.transformed.a{
transform: translate(150%, -11%);
-webkit-transform: translate(150%, -11%);
}
.anim div.transformed.b {
transform: translate(50%, -110%);
-webkit-transform: translate(50%, -110%);
}
Is there any way to disable that?
I only mean in the browser... When you click a link or a button or a div that has a click function on it, it flickers a grey box where you clicked quickly. How do i prevent this?
You could set a transparent color to the -webkit-tap-highlight-color property of that element.
a {
-webkit-tap-highlight-color: transparent;
}
Using mobile Safari in Phonegap, only this worked:
* { -webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
}
Source: iPhone WebKit CSS animations cause flicker
Also, on the main panel, enable rendering:
div.myPanelOrWhatever
{
-webkit-transform: translate3d(0, 0, 0)
}
Source: Prevent flicker on webkit-transition of webkit-transform
I'm using this code to make a element enlarge a few pixels when hovered, but for some reason it's blocking touch event (click) on iOS. Any idea?
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
If the problem is on iOS specifically, it may not be the CSS transform event blocking the touch/click event. In iOS Safari, if you want a div to have a click event, it must either have a directly bound onclick handler, or the CSS property cursor: pointer. This is how Safari knows that a div is "clickable", and it's a weird niche of Safari that I don't think exists on other mobile browsers.
See this post for more details: $(document).click() not working correctly on iPhone. jquery
But in short, I'd suggest adding cursor: pointer to .hvr-grow and seeing if that makes a difference. Your :hover CSS won't register on mobile, so you won't get the grow effect anyway.
I'm currently in the process of building a new mobile responsive site for my company that uses a number of CSS3 transitions on scroll to make images pop into focus. The effect is very striking and works great on modern browsers as well as my Google Nexus devices.
The problem I have is that the animations themselves are really slow on Apple Devices. I've tried them on a 1st Generation Ipad and an IPhone 5. On the Nexus you can scroll to the area of the page the animations are on and they will pop in straight away. On Apple devices however you have to wait for several seconds for the animations to trigger.
I have used the following library to achieve these animations:
http://www.justinaguilar.com/animations/scrolling.html
If you browse to this url on an Apple device, you will see what I mean with regards to the animations taking a while to load. After some research online I found that many suggest it could be due to the graphics processor not kicking in on these devices meaning everything is rendered (slowly) using the processor. To get around this it is suggested that the following is added to the animations to ensure the graphics processor kicks in:
-webkit-transform: translateZ(0);
However, I have already tried this to no avail. After some further research I have found that many suggest to replace translateX or translateY with translate3D but I have not tried this method yet as I do not understand how I would convert the following example:
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
-webkit-transform: translateZ(0);
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
My question therefore is twofold:
How would I convert the code above so that it uses the supposedly faster transform3d or scale3d syntax?
Are there any other methods I could use to improve the performance on these (Apple) devices so that they match the performance on more standards compliant devices such as the Nexus range?
Any help would be greatly appreciated.
I'm getting familiar with IonicFramework and building really simple app.
For now it has one button revealing panel (fading in, was experimenting with sliding in from the bottom too). It works fine on Androids but on iOS animation has strange flickering at the beginning (on both emulator and device).
Basically my view looks as follows:
<ion-content class="has-header" ng-controller="MainCtrl">
<div class="container">
<button class="btn btn__big centered primary" ng-click="toggleDetails()">toggle info</button>
</div>
<div class="panel panel-animated primary ng-hide" ng-show="detailsVisible">
Details here
</div>
</ion-content>
And css classes with animations I apply to ng-show
.panel {
position: absolute;
width: 100%;
height: 40%;
top: 60%;
padding: 1em;
}
.panel-animated {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
I'm not using any external libs to animate, just plain Ionic built-in animation classes.
I created repository with complete, ready to run application so you may want to check it.
Also video showing flickering but as flash videos are crap there is only one recorded while there were many more of them actually video here
Ionic keyframe animations fadeIn and fadeOut use opacity
ng-hide makes an element invisible with display: none !important;. Adding/removing ng-hide class causes repaint to happen.
Ionic uses Angular ngAnimate. In your style.css you have:
.panel-animated {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
I tried running it on a pretty decent nvidia graphics and it caused a peak on the rendering graph in Chrome.
After changing the styles according to the docs on ngShow aniations
.panel-animated.ng-hide-remove {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide-add {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
it causes no such peak:
It's because .ng-hide-add is applied after the element is rendered and only then animation is applied. Junk removed.
Check the https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode. Probably iOS set wrong opacity value on the first frame.