Chrome 104 allows you to "peek" at the non-active browser tabs: When you hover over one, a miniature version of the page appears in the tooltip. I wanted to know whether this miniature version includes animations and tested with the following HTML page:
<!DOCTYPE html><html>
<html><head>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script type="text/javascript">
var cnt = 0;
function count() {
document.title = ++cnt;
requestAnimationFrame(count);
}
</script>
</head>
<body onload="count()">
</body>
</html>
When I visit that page, an animation frame counter appears on its title (in the tab), increasing according to the monitor's refresh rate. When I switch to another tab, the counter stops increasing (as I would have expected).
Now when I "peek" at the page's tab, the counter first starts increasing again, but then stops after approximately one second. If I temporarily bring the tab to the front (during which the counter increases, of course) and then peek at it again, the counter does not increase any more.
Can someone explain what exactly goes on here?
To display the page in the tooltip they need to render the page again, at the tooltip's size and ratio.
This means they temporarily reenable all the rendering pipe. Once the screenshot has been taken they can pause it again.
At the time you'll leave the tab again after the tooltip has been requested once, they'll change the cached image with a new rendering. So that when you hover over the tab again later, the tooltip already has a screenshot in cache and doesn't require a new rendering, so the rendering pipe can stay paused.
Related
We are stream video via websocket in a grid image approach. We render the received images into a canvas and canvas will be updated multiple times a second. When we move to a different tab or application and return to our page, the page goes blank for few seconds say 10-20 seconds. Sometimes it takes even more time. Rest other chrome tabs are normal.
In our page, canvas rendering continued even in the background. When a tab is not visible, chrome throttles the UI changes for saving battery and performance.
When the returning to the same tab, all rendering is pushed at once and it made the page blank and unresponsive.
We introduced window.requestAnimationFrame api of browser, which solved the problem. requestAnimationFrame stops the rendering function once the tab becomes invisible and resumes when returning to the same tab.
We changed from:
render();
to
requestAnimationFrame(render);
check this answer for further understanding
Answering own question as this might help someone.
Right now, I have 2 separate pages and I want to be able to click something on one page that makes an image in a div tag visible on the other page.
This is how i made my div tag invisible.
On the other page, I have an image that is clickable, and i want it to make the div visible. Help please?
You'd need to set up some kind of web socket. When the image is clicked you'd fire off an ajax request which stores a flag in a database. The other page would be listening for that flag and when it changed the image would become visible/invisible.
Check this out
The simplest way to do so would be to set a cookie (or store the state in browser local storage, but that is not available everywhere) when you click your button, and have the other page poll for it.
Server-side solutions like sockets or session variables look like A-bombs swatting flies here, but that would surely improve your cool factor by a few thousand points.
This seems like a pretty weird design in the first place, but surely you have your reasons...
If the first page triggers the second page to open you could use javascripts window.open() and pass in what to display
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<button onclick="myFunction()">Open window</button>
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=600, height=300");
myWindow.document.write("<p>This is 'MsgWindow'. I am 600px wide and 300px tall!</p><div> <img src='http://www.jyte.com/wp-content/uploads/2013/11/google-hummingbird.jpg' alt='nothing' /> </div>");
}
</script>
</body>
</html>
the best option would be using a web app using controllers, views, modules and services like angular where the first page controller can update the service and the second page controller would have the service injected so when the service changes it updates the scope which in turn updates the view.
other options would be using backend databases and ajax to store the click and having the second page check very second for update in the database and then update the page, but this method is really not practical (running an ajax request every second).
another option is using the browsers local storage, (not supported in all browsers) here is a link
local storage.
On http://megsmoxie.com/2012/12/enter-to-win-a-fijit-friend-willa/ (or any single post) the search, subscribe, and comment forms do not work in Ineternet Explorer.
You can click in them and see the cursor for a second, then it seems to lose the focus, so I assume it's not an overlapping div issue. If you press a key as soon you click, you can enter one letter, but then it loses focus. It works fine in chrome and ff.
Oddly enough, the problem does not occur in ie on http://megsmoxie.com/contact/ or the homepage (sidebar forms work fine as well as contact form), the issue is only on single posts. Any help would be much appreciated.
You'll note that if you click and hold your mouse down, you can type into the field without interruption. It's only when you release your mouse button that the focus is stolen, and you can no longer type. With this behavioral observation, I took to Chrome to see what events are being handled:
I found that the document has a handler for the mouseup event, and that this code was coming from icx-ez-excerpt.js. Tracking this back through your document, you can find the relevant references below (removing these, sure enough, resolved the issue):
<script type="text/javascript">
var icx_publication_id = 10591;
var icx_copyright_notice = 'Copyright 2012 Meg's Moxie';
var icx_content_id = '30168';
</script>
<script type="text/javascript"
src="http://license.icopyright.net/rights/js/copyright-notice.js">
</script>
Remove that, and the code works as expected in IE. I'll dig a bit further to find out what, in their code, is breaking the experience for your users.
I looked over this page and found a lot going on. This is most likely due to some contention with the onfocus events being fired all over the place. IE is notoriously bad at handling the onfocus event in particular.
In addition there seems to be some third party scripts and controls that are firing. Its very possible that one of those is stealing focus from the text boxes in IE only.
Not much more I can tell you beyond that. If you are the developer of this site you are going to need to do some more in depth debugging. Try eliminating some of the stuff going on and adding it back one by one until it breaks again or debugging some of the javascript.
I'm really new to HTML5 for mobile. I use jQuery Mobile for my current app and I have some problems hiding the navigation bar.
I found this site: http://m.somethingborrowedmovie.warnerbros.com/. (I do not paste this link to promote the movie.)
I was just amazed by this HTML5 site. Does anyone have any idea of the method used to hide the navigation bar?
The menu is also really well done. Is there any framework to build apps like this one?
Try the following:
Add this meta tag in the head of your HTML file:
<meta name="apple-mobile-web-app-capable" content="yes" />
Open your site with Safari on iPhone, and use the bookmark feature to add your site to the home screen.
Go back to home screen and open the bookmarked site. The URL and status bar will be gone.
As long as you only need to work with the iPhone, you should be fine with this solution.
In addition, your sample on the warnerbros.com site uses the Sencha touch framework. You can Google it for more information or check out their demos.
Remy Sharp has a good description of the process in his article "Doing it right: skipping the iPhone url bar":
Making the iPhone hide the url bar is fairly simple, you need run the
following JavaScript: window.scrollTo(0, 1);
However there's the question of when? You have to do this once the
height is correct so that the iPhone can scroll to the first pixel of
the document, otherwise it will try, then the height will load forcing
the url bar back in to view.
You could wait until the images have loaded and the window.onload
event fires, but this doesn't always work, if everything is cached,
the event fires too early and the scrollTo never has a chance to jump.
Here's an example using window.onload: http://jsbin.com/edifu4/4/
I personally use a timer for 1 second - which is enough time on a
mobile device while you wait to render, but long enough that it
doesn't fire too early:
setTimeout(function () { window.scrollTo(0, 1); }, 1000);
However, you only want this to setup if it's an iPhone (or just
mobile) browser, so a sneaky sniff (I don't generally encourage this,
but I'm comfortable with this to prevent "normal" desktop browsers
from jumping one pixel):
/mobile/i.test(navigator.userAgent) && setTimeout(function
() { window.scrollTo(0, 1); }, 1000);
The very last part of this, and this is the part that seems to be
missing from some examples I've seen around the web is this: if the
user specifically linked to a url fragment, i.e. the url has a hash on
it, you don't want to jump. So if I navigate to
http://full-frontal.org/tickets#dayconf - I want the browser to scroll
naturally to the element whose id is dayconf, and not jump to the top
using scrollTo(0, 1):
/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () { window.scrollTo(0, 1); }, 1000);
Try this out on an iPhone (or simulator) http://jsbin.com/edifu4/10
and you'll see it will only scroll when you've landed on the page
without a url fragment.
The problem with all of the answers given so far is that on the something borrowed site, the Mac bar remains totally hidden when scrolling up, and the provided answers don't accomplish that.
If you just use scrollTo and then the user later scrolls up, the nav bar is revealed again, so it seems you have to put the whole site inside of a div and force scrolling to happen inside of that div rather than on the body which keeps the nav bar hidden during scrolling in any direction.
You can, however, still reveal the nav bar by touching near the top of the screen on apple devices.
Simple javascript document navigation to "#" will do it.
window.onload = function()
{
document.location.href = "#";
}
This will force the navigation bar to remove itself on load.
On an HTML page, a link like this:
Location on Page
...should navigate to this spot on the page:
<a name="pagelocation">
But in my experience, it sometimes misses - especially when linking from another page (like <a href="somepage.html#pagelocation">). By "misses," I mean it scrolls to the wrong spot on the page - maybe close, maybe not.
Normally, the target location ends up at the top of the screen. I know this can fail if there's not enough room below the anchor to scroll it to the top of the screen.
Why else would it fail? Does it depend on layout at all? How can I fix it?
(I'm keeping this general because I'd like a catch-all reference answer.)
Update 1
Thanks for the pointers so far about non-explicit image sizes. But what about on a page where all the elements have explicit size? (I'm dealing with one now.)
Quite often the scrolling can occur before the page has finished loading. If you have images without widths and heights, the page will jump, then load the image and re-layout itself, making the place you previously jumped to seem wrong.
Edit: Anything else that can change page layout should also be considered with suspicion... this include javascript and CSS that's not loaded in the <head> (never mind that all CSS should be loaded in the head; it isn't always).
If the page is bounced through a redirect, I believe IE will scroll the end page but Firefox won't.
JS Solution
Run this function on document ready.
function goToAnchor() {
hash = document.location.hash;
if (hash !="") {
setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
window.location.href = hash;
}
}, 1);
}
else {
return false;
}
}
I believe the behavior you are seeing is the result of the browser locating to that spot on the page before all images have finished loading. Once the images finish loading, then the layout of the page has changed (the page is likely longer vertically, for example), causing the location of where the anchor should be to have changed - but the browser still thinks it has already navigated to that anchor.
As mentioned above, this is probably due to images being rendered late and 'adjusting' the layout as they load.
If you can specify the size of the images then that much room can be allocated before they render, which should prevent the problem.
As a side note I've had this problem before in the form of using forward/back between enough pages that the images needed reloading, causing me to end up in the wrong place after they had rendered.
I have also seen this happen when JavaScript creates a drop-down menu at the top of a page. Then, once the menu has been finished, it is hidden, scrolling up the content below.
In the meantime, the browser has already set the target location at the top of the window. Hiding the menu a the very top of the page moves the target location up off the top of the window.
Note that you can add id="pagelocation" to just about any HTML element, for the same result, which saves you adding the additional anchors for link destinations.
OK. I think this is new. Using HTML5's autofocus will cause a misfire, as will jQuery's focus() method. Took 90 minutes of trial and error to discover this because I thought the issue was image related :)