I'm developing an app for the iPad using HTML5/CSS3. I'm not using any framework and am just using whatever is natively supported on the device. I have created some css3 animations to emulate the typical iOS sliding left or sliding right when navigating between screens. Here's an example of the slide left animation which is taking advantage of the iPad's CSS3 hardware acceleration: (the ipad is running 4.2).
/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
.screen.slideleft.outgoing{
z-index: 50 !important;
-webkit-animation-name: slideleft-outgoing;
}
.screen.slideleft.incoming{
z-index: 100 !important;
-webkit-animation-name: slideleft-incoming;
}
#-webkit-keyframes slideleft-outgoing{
from { -webkit-transform: translate3d(0%,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
#-webkit-keyframes slideleft-incoming{
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0%,0,0); }
}
I also have this CSS which I've attempted to use to fix the flicker:
.incoming,
.outgoing{
display: block !important;
-webkit-backface-visibility: hidden;
}
This works great until the iPad keyboard is used. After which point all the animations flicker severely.
I've been looking for examples of an iPad HTML5 app that uses the keyboard and doesn't have flickers afterwards, but haven't turned up much. The jqTouch demos exhibit the same behavior on the iPad (although I know they were designed for the iPhone).
I've turned up a few posts/questions of similar questions but have never found a good answer. I've been through http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ and the articles linked there but haven't had any success.
Any other suggestions?
Update 1/13 # 9am
I've added this css and it helped a lot:
.incoming *,
.outgoing *{
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */
}
The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.
Update 1/16 # 11pm
Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.
Update 1/17 # 8:30am
I've posted a demo of the problem here.
The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.
This is an old question, but I thought I'd share my experience.
I've been having issues with outrageous flickering (on css3 animations) on the iPad (as well as the iPhone, but in that case only in portrait view). I was able to completely resolve all of the flickering issues by setting :
-webkit-perspective: 0;
On the elements being animated. I'm not sure why this works, but it does (tested on iOS 4.2+, both iPad (1 and 2) and iPhone 4).
Update: I've just become aware of an issue with Chrome when setting the value of that attribute to 1. It works just fine when it's 0, so I've updated the above appropriately.
Looking at your source, the translate3d(0,0,0) isn't applied until the transition starts?
Try
.screen{
-webkit-transform: translate3d(0,0,0);
}
or
.screen *, .screen{
-webkit-transform: translate3d(0,0,0);
}
The flicker is probably the hardware acceleration kicking in (it currently only works on 3d translated elements).
I had the same issue, but i was able to reduce the flicker to almost unnoticeable by applying the fix described here and here:
http://code.google.com/p/jqtouch/issues/detail?id=301
https://github.com/senchalabs/jQTouch/issues/issue/130
Basically set the z-index of the page you a are moving out to -1 and after the transistion back to 1
I know this is a dinosaur old question, but there is a solution for this issue and it is quite lightweight and very simple.
document.getElementById('clicked_input').addEventListener('focus', function(e){
e.stopPropagation();
},false);
When i was tackling this issue too, I thought I tried everything - eventually the only thing that helped, was to create a modal window (position: absolute) outside of the app's container div, and also set the app's container div to display:false; when the keyboard was coming up. While it worked it was ugly, I tested everything to see what caused the event and it seemed that when the 'focus event' bubbled up, every 3d transform gets messed up (in flickering and performance).
Preventing the event of bubbling solved this issue completely - quite mind boggling that such a hated bug had such a simple solution?
You're not going to like me saying this, but JavaScript may be the answer you're looking for. I fear that when you bring the keyboard up, the process of rendering the HTML loses priority. With a continually updating script, like a setInterval loop, the iPad will have no choice but to render as planned. Explicit code requires no hacks.
I agree with Ben, you should probably set transforms on the classes themselves as well:
/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform: translate3d(0,0,0);
}
.screen.slideleft.outgoing{
z-index: 50 !important;
-webkit-animation-name: slideleft-outgoing;
-webkit-transform: translate3d(-100%,0,0);
}
.screen.slideleft.incoming{
z-index: 100 !important;
-webkit-animation-name: slideleft-incoming;
-webkit-transform: translate3d(0,0,0);
}
#-webkit-keyframes slideleft-outgoing{
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
#-webkit-keyframes slideleft-incoming{
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
If that doesn't work, I'd be curious to test if only translating the X with translateX(-100%) fixes the problem. (Not necessarily a fix, because you don't have hardware acceleration without 3D transforms, but would help narrow down the problem.)
Ultimately, there really wasn't a fix for this issue. It seems like form elements in WebKit on the iPad cause problems with flickering.
My workaround was that on the onblur of each form element, I refreshed the page using hash tags to ensure it refreshed to the exact same state. It still caused a "flicker" while it was refreshing, but it did keep the screen from flickering throughout the rest of the app.
I've recently been having the same problem and tried all sorts of complicated fixes. In the end I found the issue was down to the default styling on the input. I fixed my problem by adding the css input{outline:none}. It's prob just on the focus state so input:focus{outline:none;} should work.
Related
My Phonegap App I am using High resolution images and zooming functionality using iScroll. But it looks blur so i got one solution add css translate. It solves my image blur issue but in iPad2 my App crashes due to this css transform.
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
#Krishna,
Those specific CSS strings transform: translate3d(0,0,0); are used to turn on hardware acceleration. At least, that is what I read again and again. If you know that they are making you App crash, take them out. I don't see the issue.
The answer to your blurring, try something else - like increasing your pixel density.
Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure.
website: http://gerbrandy.zitemedia.nl:88/
I use a script to resize the background proportional but this is not the problem because the resize event does not fire when scrolling, so it is not a problem of the script. It has something to do with a fixed positioned element. This script works okay for several years in all other browsers.
I have no idea how to fix this. Tried several things, but don't know how to disable javascript for example but should not be the case. I'm using IE11 on Windows 8.1.
Does somebody has some same experience with this and do you know how to work around this problem?
Three things can cause IE 11 flickering/choppy/delay for fixed position element while scrolling:
If you have an "overflow: auto;" on the parent container element, remove it.
Remove background-attachment:fixed; from the fixed position element.
Remove border-radius from the fixed position element (mobile IE only).
I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page for your computer specs to handle, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
...other stuff and then
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
We can remove grey flicker on IE9, IE10, IE11, MEdge<=20 by setting overflow of html and body like
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
Apparently the "bug" only affects IE11 on Windows 8.1, or maybe 8.0 too. Removing background-attachmend:fixed worked for me. Apparently that rule was redundant, since the background image displays correctly in every browser without that rule. A second solution is to disable Smooth Scrolling in the IE settings, but that's not optimal since it's enabled in a default installation.
Flickering CSS:
#element_id{
position:fixed;
height:100%;
left:0;
bottom:0;
right:0;
background-image:url('path/to/jpg');
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
...and new code (1 line removed):
#element_id{
position:fixed;
height:100%;
left:0;
bottom:0;
right:0;
background-image:url('path/to/jpg');
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
A hardware acceleration technique as follow caused mine.
outline: 1px solid transparent;
Remove it and it might be the cause.
Another reason for flickering can obviously be another fixed element inside the fixed element. At least that was the reason in my case. The false behaviour of Edge appears to be random.
This behaviour is due to a bug with Microsofts "Smooth Scroll" feature. Happens in IE10 and 11 on Win7 and up. I wouldn't recommend to alter your perfectly working code to fix yet another MS bug. Instead disable their "feature" by opening Internet Explorers Settings, go to Advanced and in the category "Browsing" it's the last option which you need to disable "Use smooth scrolling".
My Website's body was set to position: relative.
Removing that did the trick for my IE-exclusive flickering/jumping problem.
This issue does not present on iOS or on Chrome so it is not a Webkit related issue. It seems to be specific to the latest Safari 6.0.2 on OS X 10.8.2 (and not fixed by 10.8.3 preview build 12D65 which comes with Safari 6.0.3). I shall test on Lion 10.7.5 with Safari 6.0.2 shortly, and will also be testing on preview build 12D68 as well.
http://jsfiddle.net/zrr2b/
Here is a fiddle that makes the problem quite apparent. If you've got a Mac running ML, you should see a significant difference between Chrome and Safari where Safari flickers a lot as you move the mouse around.
Basically the problem is that Safari will intermittently draw the target transform being set from JS for a single frame, then continue the transition animation. This causes a flicker, but only if the transition was in the middle of going somewhere to begin with. So the bug won't rear its ugly head for most (non intensive use) of CSS3 transition, but if functionality or visual effects depend on it to smoothly interpolate to a target (as my current project does) this flicker is not pleasant.
I have looked at similar topics related to flickering and applied pretty much all combinations of styles to counteract flickering, such as the -webkit-backface-visibility: hidden, forcing various parent elements to gain hardware acceleration, -webkit-transform-style: preserve-3d, -webkit-perspective: 1000, and none of them unfortunately do anything to address this Safari-specific problem of flickering, that is, flickering not to white or blank, but flickering to the target transform for a single frame.
Here in this branch you can see me set a bunch of styles that help with "regular flickering" but have no effect for me. http://jsfiddle.net/zrr2b/1/
As this is not a webkit specific issue I am unsure where to go about posting a bug report. It would be especially nice to get this in before 10.8.3 release since I see this as a rather big issue. Remember, this is the sort of thing that we're depending on HTML5 to do well in order for it to really kill Flash.
Updates:
Safari Version 6.0.3 (8536.28.10) on Mountain Lion 10.8.3 12D68 (Retina Macbook Pro 15.4") still suffers from this issue
Safari on Windows (5.1.7) does not suffer from this bug
Safari Version 6.0.2 (7536.26.17) on Lion 10.7.5 (Macbook Air Mid 2011) does not suffer from this bug
There are a few different ways of experimenting with reducing the flickering. The big problem however, it's that they seem to be "hit and miss". So you got to try a few to see which one helps resolve the issue.
But they center around the same few things:
-webkit-transform: translateZ(0); /* triggers GPU, sometimes fixes the issue */
transform: translateZ(0); /* non-webkit specific */
If this doesn't quite do the trick, try:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
If this also fails, try this:
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
You can read about each one of them through the W3C. But they have all worked for me on different circumstances with not fluid animations, and flickering ones, including some very odd ones, a lot jumpier than your fiddle.
They would go in the div being animated.
I have some objects in an animation which are continously animating in a rotation back and forth using css3. To do this I have created a declaration like so:
#-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}
And each object I want to use this for I do the following:
.p4, .p5, .p6 {
-webkit-animation-name: wiggle;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
Since I want some random between each of the objects I have the following altering animation durations:
.p4 {
-webkit-animation-duration: 5s;
}
.p5 {
-webkit-animation-duration: 7s;
}
.p6 {
-webkit-animation-duration: 8s;
}
And so on...
This works ok - (only testing in Chrome so far). But it doesn't seem to be very optimal.
I would like to know whether there is a faster way to achieve this. Or a leaner way. I believe I could perform this with JS but I'm not sure what is going to be more lightweight on the end users resources.
Is there a better way to achieve this sort of basic animation with less resources - and if so, how?
In addition to this, if I were to create this same animation using jquery for example, how could I actually test the memory usage required? I found something recently to test memory usage of tabs but it appears the results are inconsistent. ie sometimes 1 tab is using more memory than the other and vice versa even though the code remains the same.
Thanks for any pointers.
Stick with the CSS3 animations if they work as intended, and if needed do something in JS as a fallback for non supporting browsers.
Replacing the CSS3 with JS is not really leaner or less resource intensive, quite the opposite as CSS3 seems to have smoother animations and in some browsers will use hardware accelaration and the GPU, something not possible with JS (at least not easily).
All in all you'll end up writing more in JS, and perhaps use a library or plugin for rotating animations as well. It will be less smooth in most browsers, and use more resources as well as JS will have to set the css tranform values several times each second for a somewhat smooth animation.
Im designing a Wordpress based site for a client and was wondering if it is possible to have the pages load then open/close from the center like the iPad?
The site will essentially look like an iPad with icons inside of it that lead to the other wordpress pages. Is this effect possible?
Thanks
I would definitely advise using css transitions otherwise it will be incredibly slow.
Just include some CSS and toggle the class.
.app{
width:100%;height:100%;position:absolute;
-webkit-transform: scale(.0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
.app.opened{
-webkit-transform: scale(1);
}
Example: http://jsfiddle.net/z4bP7/
Try this: http://flowplayer.org/tools/demos/overlay/apple.html