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..
Related
I have images on page which are loaded if user scrolls down to them and this functionality is made by using jQuery plugin named JAIL.
Everything works fine and fast in chrome, but firefox lags very much (sometimes it takes a few seconds to scroll down a bit).
Images are "jailed" in this way:
$("img.lazy").jail();
Did somebody face the same issue?
As long as last time the library was updated a year ago I changed it to another. It didn't take much time and performance is much better in FF and slightly seen in Chrome.
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
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
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)
I am using text-shadow for all p and headline tags (2px white glow for better readability), everything works fine until page is scrolled and javascript changes absolute positioning on one element to fixed - which I want to stay visible.
Is there any way apart of changing style for opera to make it scrolled smoothly? overflow:auto is not working in this case...
Thanks
it's hard to say 100% without seeing the code, but I guess that the way you've styled this page makes Opera do a lot of reflowing and painting when it is scrolled, and the combination of styles will make this a very expensive operation. (It would be nice to see a jsfiddle or get a link to the actual page, this would also make it simpler to advice on possible workarounds).
There are various fixes you could try - like keeping the element you want on-screen styled with position:absolute and move it from JavaScript after scroll events, or simply avoid setting position:fixed in Opera and letting the element scroll away for better scroll performance.
However, I'd strongly recommend that you first report a bug to Opera. Why?
The reason and the genesis of the web is collaboration. It may not be obvious to (understandably) frustrated web developers struggling with browser bugs, but they have a responsibility for helping browser vendors improve when they find problems, thereby contributing to moving the web forward. A minority browser like Opera admittedly has less development and QA staff resources, but to some extent support from the user community and "normal" web developers makes up for this and makes it possible also for smaller players to develop in the Web ecosystem. I think that's one of the web's strengths and the real reason why no single corporation has been able to dominate it.
So please report your issues and problems :)
This is a problem with Opera, not any way you've written the code. Opera is a gigantic steaming pile of doo-doo with almost no market share, and you should use another browser.
That's basically all anyone could tell you here, unfortunately. I understand that everyone loves their browser of choice but some just don't handle these things well. Other examples: browser with a poor javascript engine rendering animations erratically and jerky, etc.