Using multiple createjs canvas stages on a web page.
Every time I scroll the page, on iOS Safari and Android Chrome, all the stages are cleared and repainted again (causing a long flicker).
Is there a way I can avoid the repaint on every scroll ?
I have never seen this. Is something resizing your canvas on scroll?
Resizing a canvas element will result in the canvas getting cleared. You can try doing a state.update() when the scroll happens.
Related
I am building a Chrome extension which inserts an iframe onto the screen when activated. I have set the CSS property to hidden. The scrollbar is displaying during the animation (both ways), and it immediately disappears after the animation.
The animation wipes or scrolls the iframe onto the screen from the bottom edge of the browser window.
I am aware that the seamless property was removed from iframes in HTML5.
How can I prevent the scrollbar from displaying during the animations?
Fixed by doing the following in javascript after creating the iframe.
iFrame.scrolling = 'no';
I'm curious as to why this happens. It's most visible on Firefox, and on an iPad, but Safari also suffers from this a bit.
I've seen this in two spots.
I have a background picture, which is dark, and a white container on top of it which takes up 90% of the screen and contains all the content. On Firefox and on an iPad, If I scroll really quickly the white will disappear, then reappear.
I also have a navbar that once a user has scrolled 30 pixels from the top, it will add a class with a fixed position; it can't start out as fixed. On chrome it will work as expected, but on Firefox and Safari a delay will occur then the menu will be added.
The iPad seems to be due to this: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay (currently haven't tested)
The content disappearing only happens when I scroll really quickly, but the menu will occur at a just a regular scroll rate; if I scroll really slowly it will work as expected.
Element appearing to blank during scroll
This is because sometimes the browsers can't render fast enough to keep up with the scroll. Rather than cause a janky scroll, they just stop rending anything until they can catch up. This is particularly likely to happen on mobile where you scroll really fast with just a flick of the finger, but resources are pretty low.
Navbar scroll event delayed
This depends on the browser, but again they are trying to ensure a fast scroll experience. One of the things they might do is refuse to do expensive onscroll events until after the scroll is mostly over. I also believe that refusing to do onscroll events allows them to do cool hardware acceleration that is beyond my ability to answer.
This html5rocks article is an interesting starting point for reading about how browsers do hardware acceleration.
I want to get the similar behavior for my header in HTML page as in ios google chrome's header: when user start to scroll to the top (from any place of the page) of the page header appears as if it was sitting just above. And when user is scrolling to the bottom - the header just keeps it's position and slides up.
I added a 'touchmove' event to capture scroll coordinates, and can log it in some div just to check if it is working and seems like it's working fine, except for header's position is not updating while scrolling. Once scroll has stopped header's position updated as expected.
So my question: is it possible to update an element while user is scrolling?
I would prefer to not change to scrolling the content of the element (instead of scrolling the page itself).
Seems like no workaround, from Jquery.mobile page:
Triggers when a scroll begins. Note that iOS devices freeze DOM
manipulation during scroll, queuing them to apply when the scroll
finishes. We're currently investigating ways to allow DOM
manipulations to apply before a scroll starts.
Do you by any chance have some code we can look at?
Although, if you're using jQuery, check out this plugin: http://wicky.nillia.ms/headroom.js/
It provides the functionality you are looking for.
Please take a look at this code: http://jsfiddle.net/6JnJb/1/
My problem is that in chrome, the divs doesn't change their color if the mouse is over them, when scrolling. If I move the mouse over a div 'manually' (not when scrolling) than it changes it's color to red.
In Firefox it works perfect, but not in Chrome.
Can I solve this problem or simply this how Chrome works?
Chrome does not propagate mouseover events right away when scrolling. There really isn't any way around this issue, since it is giving priority to the scrolling event rather than the hover event on a particular element.
The behavior I see is that the hover effect doesn't move with the still mouse on scroll but catches up when the scroll speed is sufficiently low.
I'm experimenting with css animations on an iPad. I'm finding that while an animation is happening (.e.g a rotating div), if the user is touching the screen currently running animations get choppy and new animations don't start till the user stops touching. I'm assuming that iOS isn't updating the dom while the user touches or a scroll is happening.
Is there some trick to force Safari to continue drawing while the touch or user action is happening?