On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.
According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) :
http://focuslabllc.com/journal
But my website has the same issue as this one:
http://negativespacealphabet.com/
What are they doing differently to get it work? I appreciate your help!
Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.
Example, you use transform:translateY to create a parralax effect, then add:
transition:transform 10ms linear
This forces the parralax to animate smoothly.
Downside, its not fully backward compatible with older browsers
Related
I'm developing an HTML5 app for mobile/touch device deployment and are utilising PhoneGap and only targeting the iOS platform for the moment (Webkit).
My issue occurs with the CSS3 transitions (and it happens to regular jQuery animations as well) in that Webkit tends to do some strange things. For instance, in the code available to view here (http://jsfiddle.net/lvl99/dSjcj/) when you step through the pages, going back in the sequence (i.e. from page 5 to 1) will render the animation fine, however stepping forward (i.e. from page 1 to 5) will produce inconsistent rendering, mostly on the side of ugly (remember to view it in Safari. I've been using Safari 5.1.7).
I was originally developing using the jQuery Mobile framework, but the key functionality that I was using was the page routing through hashtags and the transitions, but since I had these issues with the transitions, I tried developing a simpler solution to avoid any JS/CSS conflicts with jQM. Alas, it's possible that the errors I've been coming up are actually Safari/Webkit related.
I originally used jQuery.animate() on the left property, to now using CSS3 transform technique similar to the jQM way of doing things, also to help with speed and test whether it would be more willing to render properly. Both haven't worked to varying degrees of unworkingness.
Fortunately, Firefox renders everything fine. It has no problems, however Firefox isn't the target platform and when the project is compiled within Xcode in the PhoneGap environment, it expresses the same problems that Safari has with it. When I was still using jQM with an earlier development version, Safari would render it fine (including Safari on the iPad Simulator), however UIWebView wouldn't. This made me think that perhaps it was a Nitro JS engine issue (as in, perhaps UIWebView didn't have the speed/power/capability to render the transition properly -- I've attempted to transfer all animations to CSS3 to relegate the rendering operations to the GPU).
I've used various plugins like jQuery Transit, jQuery Animate Enhanced, and TransformJS. I also tried coding my own custom transition handler within jQM and it didn't render properly (although it came the closest: worked in Firefox and Safari, just not in UIWebView).
I've had inconsistent results regarding transitioning elements with different types of content too: video, images, floated elements, multiple paragraphs are all I've tested. There was at some stage too issues with transitioning to/from the extreme ends of the sequence (i.e. 1 and 5), but now my issue is just that ascending page transition (i.e. 1 to 5).
I've spent a number of days on this, trying to address this seemingly small issue, but it's quite integral to the user experience having slide transitions like this which are contextual based on the direction the user is moving through the app. The easiest solution is to just remove the transitions, but if there's some way to understand what exactly Webkit/UIWebView is having trouble with, to create some solution for it. It's no doubt related to the flicker issue jQM experiences with transitions too. A lot of the CSS fixes for those people suggested on the web didn't work either, such as -webkit-backface-visibility: hidden and setting a default transform property -webkit-transform: rotateX(0).
It looks like the problem is that it's not animating the next item from the right (when moving up 1->2->n) but rather just '.show()'ing it when the previous item is done animating out.
Gimme a sec to step through the .js
...
Ok, I think I know what it is, what it's doing is, when it's moving right-to-left (numerically up) you can't see the new page (higher number) coming in from the left, because 'left' is moving from 100% -> 0% because the smaller number is moving out.
Ok, I think that's wrong...
If you change the 100% to 92.5% in the #-webkit-keyframes slideinleft and #-moz-keyframes slideinleft declarations then it should work for you, unfortunately I can't tell you why exactly as we (work) avoid CSS transformations as we do a lot of corporate work and so still need to support IE7+ and sometimes even 6 :(
Note that you can try a value other than 92.5% I just wanted to find the lowest sensible value that worked for you (95% didn't work)
http://www.perandersen.no/sandbox/robot/
I have tried writing a game base for a side scroller adventure/puzzle game. I have some performance issues in Chrome and it looks buggy in IE and Safari, but nice in FF and in Opera.
Is it possible to make the code more efficient? Is there another way of achieving the parallax effect? It really annoys me that this isn't working the same way in all browsers...
For the backdrop, looks like you need to specify 'background-attachment: fixed;' and have javascript move it with the page instead of against the page to avoid that jerky effect. The rest looked alright. See here for further explanation: http://thelastdeveloper.tumblr.com/post/20536873534/fix-parallax-jumping-jerky-hinky-jinky-scrolling-on
I just finished a website: http://www.basenharald.nl and all is good in IE9, chrome and firefox.
It does not support browsers < IE8, but that is planned.
However the website is really really slow in IE8 and for some reason some people encounter that the scrolling divs do not work (not all IE8 users).
Any help on these issues would be greatly appreciated since i cannot locate the problems.
Because IE8 just renders these animations VERY poorly. Also slow PC's will have issues with the animations.
You should detect IE8 (and lower) and disable those effects, because they are not functionally necessary
First of all well done on a good looking site. I have used Developer Toolbar in Chrome to detect the following problem. Your site uses or reference a page called daddy-shoutbox.php. This code in this page or calling code to this page is causing a infinite loop or continues call. From my results I could see that that page takes on aggregate about 500ms to load.
From the browser perspective I can only assume that IE8 actually shows the symptoms of this loop. My stats showed that the page has made over 130 requests and counting after 2mins.
Not modern browsers and, as douwe said, even slow PCs will be affected.
The parallax animation requires lots of CPU time and the effect is mainly related to the aesthetics of the website.
A good compromise between usability and aesthetics could be achieved by reducing the parallax effect.
I suggest you to remove the effect from the text ( class: contentwrapper). It will save you some CPU time and it will give you a more readable text.
You could even switch to a normal scroll bar. For my experience, customized scrollbars, always give some trouble with the users ;)
If you are happy with the experience on the modern browsers, you could simply discriminate older browsers.
With jquery you can use this
good luck
In Opera 11.52 it doesn't load at all..
When viewing Gmail with an iPhone, they have it setup so that there is a statically positioned control bar at the top of the screen. Even if you scroll up and down on the page, it doesn't move. I'm curious if anyone know how they have set this up.
As far as I have heard in the past, it isn't possible to create fixed controls using CSS on iPhone's Safari. Instead it has to be something you hack together with Javascript. Do the same techniques work for Android's browser?
Ideas? Thoughts? Thanks.
In general the way this works is by overriding JavaScript touch handlers to prevent the default scrolling mechanism in the webpage. Then inside the touch handler you manually calculate touch physics and position the content in JavaScript.
Since you asked about Gmail's implementation it's worth noting that the Gmail team blogged about their implementation here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
iScroll which has been mentioned by other posters is probably the best known open source implementation: http://cubiq.org/iscroll
Apple's own implementation of this is known as PastryKit but it isn't well documented and not open source: http://daringfireball.net/2009/12/pastrykit
Update: I just reread the question and noticed you were asking about Android (doh!). Looks like Android 2.2 added support for CSS fixed: http://kentbrewster.com/android-scroller/
I'm not super familiar with iOS web app development, but iScroll looks promising.
This is just a simple CSS style:
.className{
position:fixed;
}
You are right in that position:fixed; doesn't work in Mobile Safari but I believe it does in Android.
Here is that script you were talking about to make it work in mobile Safari:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
On the mobile site I'm building, I need the top header to stay fixed positioned.
I am aware of the fixed position solution for Mobile Safari as seen here:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
I tried it and it works well. However, I was wondering if there's a single solution that works for all major smartphone's mobile browsers. Note: I don't need the footer to stay fixed, just the top header. So this should make it easier accommodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.
Thanks!
Important update
As of iOS 5, fixed positioning works fine on mobile. Similarly latest androids support it.
Old answer
I think iScroll is the most actively developed solution, it does support Android
But there are a few things to watch out for:
By enabling this hack you are disabling features people are used to like zoom.
It is adding a lot of complexity to your solution.
For these reasons JQtouch decided not to use it:
Not a problem. It is not currently
supported in jQTouch. Not sure how
familiar you are, but the main problem
here is that mobile Safari does not
support position: fixed. A few people
have worked on implementations of
this, most notably
Cubiq
and
Doctyper.
Both feel wrong to me,
hence why I don't do by default, but
you're free to try to make an
extension which supports it-
Personally when dealing with stuff that needs fixed positioning on an iPhone I prefer to go with static positioning and just autoscroll to the bottom/top when changing the content dynamically.
I was facing the same problem for more than two weeks . And this solution worked for me. Just include
-webkit-backface-visibility: hidden;
in the css of the element along with position:fixed .
It will work fine
Following on from the link that Sam Saffron posted, it seems that a new version of iScroll (version 4) has resolved some of the problems Sam listed.
iScroll-4
In addition to all previous iScroll features, version 4 introduces:
Pinch / Zoom
Pull up/down to refresh
Improved speed and momentum
Snap to element
Customizable scrollbars
I have only looked at the demos on their site, so I can't vouch for it, but it looks good!