to be honest, i'm a little bit desperate.
After my Google Chrome Browser updated – from i think Version 39 to 41 – one of my clients websites is absolutely disfigured in Chrome.
You can see it here:
http://prinovis-media-day.com/
If you scroll down, all the »parallax« elements are flickering.
I've checked it on my macbook on Version 39 — it's absolutely fine in Version 39.
Basically, what i'm doing to create this effect is very simple:
$("window").scroll(function(){
var move_value = Math.round(scroll_top * 0.3);
var opacity_value = *some other value*;
$(".parallax-container__content").css({
'opacity': opacity_value,
'padding-top': move_value +'px'
});
});
Does anyone know whats the matter? It worked like a charm before this update...
Thanks a lot in advance, i really appreciate any answer!
Moving my comments to be an answer:
You could always cache the $(".parallax-container__content") element
in a variable so that it is not retrieving it on every time the scroll
event is fired, and that goes for the opacity value too (unless that
is dynamically changing depending on scroll_tp. Doing this might cause
the script to speed up and help the jank that is happening
If it is still really noticeable, then you could use feature detection
to detect if CSS transforms are supported in the browser and user
'transform: translate' instead of changing the 'top' value. If it is
not supported, then just revert back to changing the 'top'. Changing
the 'top' causes a repaint in the browser while 'translate' does not.
This repaint is quite expensive to the browser and can cause jank on
certain machines. modernizr.com can help you out with feature
detection, but it is potentially overkill for just helping out in the
this situation.
Have a look at this for detecting cetain styles are supported: http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
this is the easiest way to check (remember to account for vendor prefixes).
Related
In the project I currently work on we experience very strange rendering issue. The worst thing is that this issue emerges completely spontaneously and after several days of testing we haven't managed to find the sequence of actions wich would reproduce this issue. Here is an explanation of how this bug look like. Here is a screenshot of how the page should look like:
But instead of this after some manipulations content block pops up so only the part of the content is visible and its look like:
The most strange thing is that such a position of the block is not based on values of CSS properties as shown by Web Inspector.
As you can see the CSS properties are ok, while the position of the block is not. This fact suggest me that it could be some rendering bug of the WebKit engine
The project is built using Ext JS 3.4 and it is a classical one-page web application. This issue was seen in the last versions of Chrome and Safari on Mac OS 10.7/10.8. Though due to the spontaneous nature of this issue it might be present in other browsers and platforms too.
Any piece of advice on how to debug such issues or how it could arise is welcome.
Please check if any of your code or Ext JS's code is using scrollIntoView method, we have seen similar issue when scrollIntoView is called on any element that does not have overflow set to auto and it is inside an clipped element that is probably placed relatively positioned.
It seems bug in webkit because it scrolls clipped element which is not happening in other browsers.
I also see two elements in same hierarchy which has overflow set to auto. And scrollIntoView is scrolling wrong element.
Chrome and safari on Mac are having problems with scrolling. If the element has been scrolled and the content changes, the scroll position is kept even if the content is not high enough to require a scrolling.
The work around we have found in our application is to resize the container (the one that has the scroll) so that it has the scrollbar (or else you cannot play with the scrolling properties) and then reset the scrolling, and the height.
$(container).css('height',1).scrollTop('1').css('height','');
Here is how we do it in jQuery. You will not even see a flickering :)
I am not sure if it is the problem, but this thing kept us on our feet for a while.
i went through the same problem while working with a sencha touch 2 app and because thats same as ExtJS i have a solution for you
this probably is a bug in the framework and this happens when the ExtJS renders the application before the browser populates mayb the correct window.innerWidth and window.innerHeight and thus the viewport cannot take the correct width and height. this also explains the randomness of the event. This becomes more prominent when used on mobiles probably because of the limited resources and slow response.
the solution that i took to handle this mayb isnt a good one but i couldnt find a better one considering is a glitch in the framework itself
i poll for the correct height and width of the browser for around a sec after every say 100ms for the correct height and width of the window and if i find that the height OR width of the viewport isnt same i re adjust it. because you are working with ExtJS and app would run on high powered systems(as compared to mobile phones) i would recommend a smaller interval and then to be safe a larger time period to which it polls.
heres the code that i use currently edit according to your needs
var aId = setInterval(function () {
if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
clearInterval(aId);
}
num = num + 1;
if (num > 10) {
clearInterval(aId);
}
}, 100)
i currently use this code inside the launch function of the app. but you can also use this inside the show event of the viewport for which you should keep the interval time to minimum possible to avoid any lags.
with this if you think this app might be used on devices where the window height and width would be changed by the user (like that of mobile browser when the orientation changes or if you think user would change the height and width of the browser window). then just copy & paste the same code piece inside the viewports resize event so that it also polls and resizes viewport when the size of the viewport changes.
Did you try adding a clear:both; block after the toolbar div ?
<div style="clear:both;"></div>
#bjornd it's pretty hard to debug without any code :)
Is the toolbar positioned and has the content an ID that's called in the URL?
In other words: is there some link (e.g.) that triggers #content and has no preventDefault() etc? This would scroll the page probably.
I dunno, this was the first thing that came to mind.
It could also be the toolbar content that is (for some reason) no longer cleared or some change in the content's top position (relative to another changed/removed element?)
Try and create a stripped-down test-case that contains the simplest of code but still triggers the bug. If you post that (through e.g. a Fiddle etc) we can have a proper look.
It might be a css issue;
I've had a similar issue using equal height divs by setting a padding-bottom: 99999px; and margin-bottom: -99999px;. Which workes fine in all cases, except when you use hashtag anchors to jump to a div further on the page. Jump down.
In that case the top of the page clipped and started with the div I wanted to see.
Since you say the problem is pretty hard to track, this might be something to have a look at. The solution was to remove these 2 css lines and use another method of setting div heights.
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.
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..
I'm using jQuery .scrollTop to scroll image within a div. It works great in Firefox - scrolling is very smooth and fast. In IE 8 scrolling is very slow and glitchy - image scrolls once in about a second - two seconds. Image size is on average between 2000 * 2000 and 4000 * 4000 pixels.
Is there a way to improve this for IE 8?
Performance in IE 7 is slightly better, but still not good enough.
Thank you
Edit: I believe that an issue is in how scrolling is implemented in IE 7 and 8. I have enabled both scroll bars (overflow-x and overflow-y), and I have tried scrolling an image using these scroll bars. Issue is exactly the same. I've tried running this on a fairly underpowered PC - pentium dual core few years old with 2 GB of RAM as well as Core i7 desktop with 2.8GHz CPU 1600Mhz RAM and the results are nearly identical. FireFox scrolls a lot faster, however its CPU usage on average is 10% higher than IE CPU usage. This leaves me puzzled...surely Microsoft would have addressed this issue by now?
Another thing that I have found slightly odd is that scrolling ran faster on a Core 2 Duo laptop. I'm wondering whether this has anything to do with graphics card drivers...does IE 7/8 even make a use of GPU?
Excuse me if any of this sounds silly, but I'm really interested in solving this problem...IE can't be that bad..
jQuery's .scrollTop() is notoriously slow in ie, and if the markup is even slightly complex or large, you'll never get it to perform well.
The solution is to not use the jQuery .scrollTop() function, but build your own based on the native properties .scrollHeight and .scrollTop.
The reason is the way ie computes offsets, which is the base of jquery's .scrollTop() slowness - you have to walk up the DOM tree and calculate offsets for every parent in ie.
jQuery does this the best it can, but you will always be able to do it faster since you know the markup in advance and can optimize this - you can even do the offset calculations in advance most of the time and just use a constant as modifier.
All that said, this might not be jQuery's fault - it can simply be a problem with ie's rendering pipeline - depending on how you made your marklup and styling of it, a scroll might force ie to completely rerender/repaint the page for every pixel you scroll, and that will slow it all down to a crawl.
I'm having a problem using the jquery hover events. I've created a reduction of the problem. You can find a working demonstration here. I can reproduce this after moving the mouse around in IE, FF, Opera, and Chrome.
I'm using queued animations in my mouseover event. Roughly 1% of the time, the color of the td elements is left as #0f0 after the mouse has left the td though. This should not be. The mouseout event should guarantee that eventually all tds turn back to #00f after a time has passed.
Update 2:
I've now reduced this probably about as far as it will go. No mouse events used at all. It's started working better in Opera, but now IE is a total cluster.
Anyway, I'm using a button to trigger this:
function ani() {
$('td')
.stop()
.animate({backgroundColor: '#0f0'}, 3000)
.animate({backgroundColor: '#00f'}, 3000);
}
See it here.
Update [n + 1]:
I just can't leave this alone. I've determined that the animation actually is occurring. It's just not automating the background color. I've done this by adding text and animating the background and foreground in unison. Under normal conditions, you should never see the text once it starts animating, but sometimes the background gets "forgotten", and sometimes the foreground. This indicates to me, that a jquery animation is actually occurring, but it is just not animating all the attributes it was instructed to. For the curious, see it in action here. (warning: IE chokes pretty hard on this)
Ok, going to play some video games now.
I don't understand how you get your 1% figure. I'm not sure about what behavior you're seeing, but in both FF3 and IE8 I get this ugly illegal-property-value error as documented here: http://dev.jqueryui.com/ticket/4251. More relevantly, a good dozen of them aren't changing colors, even if changed to simply a single-color animate.
Fixing that line in the jquery.color.js and both FF3 and IE8 work like a charm, although IE8 white-screens, it recovers eventually.
jQuery is great for managing the DOM, not so great for effects. In my experience, the UI stuff is painful to use and has always had issues. The framework itself, though, has always treated me well.