So I hand-made my own lightbox-like effect and I've run into a little bit of a problem on Firefox. In Chrome, the fade-in looks clean and smooth. And IE, well lets just say I have a conditional statement that opts out of the code if the user is browsing in IE.
Firefox looks a bit stuttered, but I'm pretty sure the image is loaded properly.
So I am wondering if there is a way to smooth these types of things out?
My code looks something like this for the click function, although I dont know if this will be of much help.
$main_image.click(function(){
$lightbox_panel.fadeIn(fadeTime);
})
Thanks!
About all you can do (from my experience at least) is add more time to the transition. FF is just a little slow when it comes to these things.
Related
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
I have an issue with jQuery ScrollTo.
It skips and there is a lag when applied to my page.
Here's a link to the jsFiddle example that works and here is the same code applied to my page that does not work.
It might function correctly on some machines but all the machines I have tested this on don't!
Might there be an issue with the amount of images I am using?
Is there anything I can do to overcome this?
The problem there is the background image. On "poor peformances machines", using a full page background image like you did and scrolling is not very efficient.
For instance, my machine at work lags as hell on your page, either using the top menu or regular scrollbar. On the otherhand, my MacBook Pro handles your page perfectly with a smooth feel when using the top menu to scroll.
I tested it using chrome on my machine, and removing the background image using developers tools. It now works perfectly. As soon as I put the background image back, it starts lagging again.
Its a bit jumpy on my machine (your site that is), but one thing i noticed that may help is that it is really nice and smooth smooth if i very quickly click back and fourth between 'Senior Executive' and 'Experienced Hire'.
Is there any callback or some calculation being done before, during or after the scroll perhaps?
I have a div, so that when I click, it will toggle to expand, or retract. It works pretty well on all browsers, though there is a thing that intrigues me. On Google Chrome when it retracts it leaves small lines from the movement.
www.rezoluz.com/login.php - The page
To see it, open that page with Google Chrome. And click on the register button twice, on the second time it will leave lines, normally, but not on other browsers. I'm using a standard .animate, with jquery. All help is greatly appreciated.
SCREENSHOT:
Also, here is a jsfiddle showing the result : http://jsfiddle.net/rwQPu/2/ . Error in Chrome 21.0.1180.81 beta-m Win7.
It's a bug of chrome. See a previously asked question here :
Odd “shaking” effect when animating width with jQuery (only in Chrome!)
This is not a coding problem but actually a bug in certain versions of Google Chrome, as unlikely that may sound.
There is no fix as far a I know, we just need to wait for Google to resolve their problem, knowing Google that will be done from the moment they find out about it.
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
When trying to use Shadowbox with IE6 the overlay transparency simply not works, it remains completely black. In all other IE versions (7, 8 and 9) the overlay works just fine. Do you guys have any idea to why this is happening?
If you wanna check out what I'm talking about, you can test the examples on the project's web site, they also do not work in IE 6. You might notice that the buttons are also not displayed, as they are .png images with transparent background, however this can be easily fixed by creating .gif images and setting them specifically for IE6.
Links:
Main page: http://www.shadowbox-js.com/index.html
Thanks,
I seriously advice you to give up, because people that still use IE6 are seeing a weird, ugly, cracked web all the time and they just dont care. You may spend days struggling with weird ways of overcoming a problem that comes from the simple fact that ie6 was not made for transparency at all.
GIFs wont work for you. Wanna know why? Because opacity of gifs is either 100% or 0%. In Shadowbox you will want middle opacity, like 50% or 70%. PNGs might work with pngalpha js scripts, but they tend to fail in animations, which are used for shadowbox.
Please understand that i'm not flaming here, i'm just trying to be honest with you.