My web app uses two javascript frameworks: iscrol and jqmobi. But when the app loads a large piece of content into the html page, the screen flickers in iOS6.
I'm confused that what causes this problem and if it is related with the above two js frameworks, which one should take the major responsibility?
Is there any solution can make the flickers never occurs?
The default kitchen sink sample does not flicker using jqmobi's built in scrolling library. Signs point to iScroll causing the problem.
Check out this article from iScroll http://cubiq.org/you-shall-not-flicker. I had the same problems when I used it and found applying -webkit-transform:translate3d(0,0,0) to the elements that were scrollable solved the flickering for me. Use this sparingly though as it does have an effect on performance.
#someDiv {
-webkit-transform:translate3d(0,0,0);
}
Hope this helps!
Related
I am curious on how is the sliding section on http://www.wearebeef.co.uk/ done?
I have tried Googling but I cant really find a way how it is done.
I'm the Lead Web Developer at Beef, so I will try and give you a run down on what we did. Most of this you should be able to work out from the source code, so wont post too many examples.
Each panel is a <section>, all with a width of 90%. Each panel is then given a fixed position, and left value of 0 5%, 95% etc to space them out. We then have a class on the body stating which panel is open, and give the other two a width of 5% e.g:
body.home panel.work,
body.home panel.noise {
width:5%;
}
And so on and so forth. We use JS to change the appropriate classes, and a CSS transition handles the actual animation. There is a backbone core as well that handles loading all the content into the panels, and jQuery fades them in. We built it in Middleman, so it pumps out a static html version, so should work without JS as well.
We encountered loads of bugs when building it, especially getting all the responsive stuff working, and scrolling on iPads etc. But have a good look though the source code to work out what we did.
Thanks for the interest though. Any more Q's just let us know.
Cheers!
Hmm, if you checked the website's source, there's a script file named application.js and it contains a function named cycleImages. When I searched for it, it led me in this site:
http://jquery.malsup.com/cycle/
-- It's different from the one in the site but I think it functions the same.
You could also go through the application.css in the code and you'll be able to see that the site implemented a CSS3 property: transition
You could see demos from css-tricks site or w3schools or... over here
http://www.css3.info/preview/css3-transitions/
There could be other tricks but you just have to go thoroughly in the site to see how it was done.
I'm building a responsive site and I have it set so that when the site is viewed on a mobile phone, I will hide certain code via Bootstrap's "hidden-phone" class. I am using this feature for a heavy slider that I don't to be shown on a mobile phone. But, does the code actually not load or does it load but is not visible? If it does load but does not become visible, I don't see what the point of that is...
Thank you.
Maybe you should think of replacing your slider with a different element instead of hiding it.
Also,this might help you:
how to use responsive features of bootstrap 2.0
I have run into a really weird bug. I have an element that the background colors drops off of until you take your cursor and select it.
Here is the page:
http://austinpray.com/test
Here is a video:
https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov
The video is taken with an iPhone because the issue does not occur when I am using a screen recorder oddly enough. It only happens inside of chrome. I have tried both chrome and a blank install of chromium will all caches cleared and such and this still occurs.
What am I missing? I will update as I do more testing on different devices.
EDIT (05/22/2013):
I did some more research and I found the following behavior:
https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov
The problem seems to arise when animation and scrolling happen at the same time.
I froze the entire site with the issue here: mirror
EDIT:
Example
Here is a stripped down version of my code that actually works:
DEMO
The issue is not present in this one. What is different about the following demo and the code that is causing the issue? I have tried stripping out the parallax background code and that does nothing to fix the issue. I am currently rewriting the entire menu's css to see if I missed something simple.
temporary workaround
After learning a TON about how chrome renders elements (especially fixed elements) I came across this temporary solution:
-webkit-transform: translateZ(0);
I added this to my nav bar's style. This is basically a quirky little hack that does nothing to the page and turns on GPU acceleration. This will have to do for now either until chrome is updated or until I rewrite the entire menu bar functionality. The only downside is that resizing the window suffers a performance hit.
a more elegant solution
After all this research and troubleshooting I figured out that the only real problem is that chrome needs to redraw the element all the way rather than stop at an arbitrary point and leave artifacts. Since the pure CSS solution creates some performance issues I I found an excellent method of forcing the browser to redraw an element via jQuery!
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
I'm using this on the deployed page and it seems to be working great with no performance hits. I'll keep it around as long as chrome 27 is still floating around.
I also found weird behavior and possibly the root of the problem:
The issue does not occur when I have Compositing for fixed position elements enabled in the chrome about:flags section (chrome://flags/). I am running Chrome Version 27.0.1453.93.
My issue is somehow connected with how chrome handles the stacking context of fixed elements and animating fixed elements as the browser scrolls. This article expands a bit on the changes.
How Chrome handles compositing
GPU acceleration as it related to compositing
As this answer showed up first when searching for this issue I thought it would be helpful to link to another answer that seemed to resolve the problem more fully.
https://stackoverflow.com/a/12023155/2192201
And if you don't feel like clicking through, all that was needed to prevent the artifacts while animating was this one line of css:
-webkit-backface-visibility: hidden
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I am trying to program a website with multiple independent pages and I would like to use the slide transition effect between pages as it can be done with the jquery mobile Framework but WITHOUT using this one. My goal is to make a desktop web site and not a mobile app.
The fluidity and the speed of execution are my objectives. I saw that you can use the jQuery Easing plugin (version 1.3) but I'm not able to place this code for having a fluid transition effects between independent pages.
I intended to do this transition page effect with the TerrenceRyan.com solution but it doesn't work correctly.
I don't want to do a navigation with jquery anchor or hidden divs placed in a long one page, but many independent pages that arrive at their click sliding.
To give you an example of what I am trying to achieve, here are some links:
http://www.craigandkarl.com/
http://www.ultranoir.com/
If performance is key and you don't want to use jQuery maybe have a look at the new greensock javascript library
They have a test page which shows that it performs really well against other similar libraries:
speed test page
I have been using their AS2, AS3 engine for flash for many years now and if the JS version is nearly as good, then I'm sure it will be of use to you.