We Keep Coding

Preventing re-paint in Google Chrome via CSS/JS/etc

Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).

You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background

bookmarklet can't fixed position in ie when run on a plain image url

Okay, so this is a long long shot but here it goes...
When IE (8 and 9) navigates to an image url directly, it renders the image inside a a bare-bones html page with no styling. (If you hit F12 to get dev tools open, then you see this).
Now consider you have a bookmarklet, that when "run" inside this context, must insert a new element into the page, and position it at the top using css: position:fixed; top:0; left:0; Then what appears to happen is the element gets inserted into the dom just fine, but the positioning completely fails. The new item acts as if it is "inline" right after the original tag.
In fact, positioning all together seems to fail. It almost seems like the "positioning engine" is turned off for the page, but the rendering engine is turned on.
So my question is, in this context of IE navigated directly to an image url, is there any way to get IE to render positioning correctly? It runs javascript relatively well, and css okay too.

For those of you that might have this problem - what I had to do was detect that the user was using IE, and detect the mime type of the request was some type of image (this mime type is different between different versions of IE). When this problem combination came up, I grabbed the url of the image that the browser had loaded, and then navigated the browser to a special page I had setup that when navigated to would load the image inside a normal web page, then execute my bookmarklet code. So the user ends up experiencing the correct bookmarklet functionality, but the url in the browser just has to change to load a page from my server...

Overlay a frame on every webpage a visitor visits?

So I want to be able to have a space that overlays content on any website with the click of a button (something that also is above everything on a web page). An example would be the Google Translate page, http://translate.google.com/translate?u=about%3Ablank&hl=en&langpair=auto|en&tbb=1&ie=UTF-8 where the frame at the top will overlay any website that is entered in the url box.
What I want to do is have a box like this overlay every webpage, like google's translate does, but have it hide with a click of a floating image, say an arrow.
The files will be locally stored on my HDD, but I don't see this being an issue.
I don't know what languages to code this in, but I assume Javascript, however, I do not know the classes to call to do this. Any advice chaps? I'm not asking for a hand out, just a point in the right direction!

It looks like you want to develop a browser extension. Look here for Chrome:
http://code.google.com/chrome/extensions/getstarted.html
There are similar ways to do it for IE, FireFox, and Safari.

It sounds like you'll either need to use frames or an iframe. They are very similar in how you interact with them (say to make them load a new page) although they are different in their implementation.
A great site for learning about frames is w3Schools:
http://w3schools.com/html/html_frames.asp
http://w3schools.com/html/html_iframe.asp
You can use JavaScript to reference the frames via its name or its ID. Ex: document.framename.src = 'hello.php' or document.getElementById('frameId').src = 'hello.php'.
One problem with using frames is that search engines don't like them. If you are using an iframe, the search engine will search your page, but still not the iframe.
As for resizing/hiding the frame/iframe, you can do that with both frames and an iframe, although the method for accomplishing it varies depending on what you use.

Do links with javascript slow down a page?

Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"

I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.

What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.

Document.domain and <iframe>s breaks the "Back" button in Internet Explorer

This is a very urgent problem and I'd be forever indebted to anyone who can lend some insight.
I'm going to be deploying a widget (called the "ISM") to a third-party site. That site uses the document.domain JavaScript property to relax cross-domain restrictions (e.g., setting document.domain in "a.example.com" and "b.example.com" to both "example.com" so they can access each other's DOMs).
This causes problems with my script in Internet Explorer due to the way that I construct an <iframe> that is used to display my widget's HTML content. In Internet Explorer, using document.domain on a page, and then creating an <iframe> with JavaScript, will cause you to be immediately "locked out" of the <iframe> - i.e., you can create it, but it's not created in the correct document.domain, so you're not able to access its DOM due to security restrictions. This isn't a problem in any other browser.
To see what I'm talking about, load this page in IE:
http://troy.onespot.com/static/3263/stage1.html
You should see a JavaScript error: "Access is denied."
To get around this, I'm setting the dynamically created <iframe>'s "src" attribute to load a static HTML file that's hosted in the same domain (different subdomain), and setting its document.domain property to the appropriate value:
http://troy.onespot.com/static/3263/stage2.html
That gets around the security issue, and lets me write the document I originally wanted to write to the <iframe>:
http://troy.onespot.com/static/3263/stage3.html
With that document in place, my widget does some polling to our server to get some HTML content that I want to insert into another <iframe>, which will be visible to visitors of the parent page. I've roughly simulated that here (using static content, not actually contacting our server):
http://troy.onespot.com/static/3263/stage4.html
Here comes the problem. When I get that HTML content and insert it into the second <iframe>, I now face an unusual issue with a broken "Back" button. This happens in Firefox 3.0 and all version of IE (possibly other browsers), though it does not happen in some browsers I've tested (Firefox 3.5, Safari, Chrome). See this page:
http://troy.onespot.com/static/3263/stage5.html
If you click the "Google" link, all seems fine. But, when navigating back to the previous page (that has the latter test script), another JavaScript error is introduced: "Permission denied." This does not terminate the script, and does not appear to have any ill effects, other than the fact that I assume it's connected to the broken "Back" button functionality, which is a very big problem - the one I'm desperately trying to solve. I'm at a loss to debug this error since its call stack starts and stops in the jQuery script.
You can also encounter this error - with more serious symptoms - by going to the last link above (stage5.html - clear your browser cache first). Click the "Stage 5 (Again)" link, then, after that page has loaded, click the "Back" button.
The "Back" button is completely broken! You can't go anywhere except to another URL.
This is the problem that I need to solve as soon as possible. Any insights or help would be extremely appreciated!
I can't deviate from this method too much, so outside-the-box suggestions are definitely welcome, but I may not be able to use them due to the constraints of the widget's specifications. I would prefer to understand why the "Back" button is breaking and how to fix it, along with the "Permission denied" error related to jQuery.

It's really hard to try out fixes for this because of the multiple domains. One thing I've heard is that IE treats a blank src or "about:blank" as a different domain, but it treats 'javascript:""' as the same domain. Have you experimented with changing stage one to set the iframe src to things like:
iframe.src = 'javascript:""'
Or:
iframe.src = 'javascript:parent.getFrameHTML()'

Part of the problem seems to be that IE (at least IE 7) adds two entries to the history named "Domain" when I click on the "Stage 5 Again" link. When you use the little drop-down arrow next to the Back button you'll see the history of pages allowing you to step back more than one step. I see the previous two entries are listed as "Domain" and clicking either of those brings me to the same page. The fourth spot (after Current Page, Domain, Domain) is the correct "ISM Back Button" link to the original stage5.html page.
So the problem isn't exactly that the back button doesn't work, but just that the entries in the history are added and so the back button takes you to the wrong place. I don't have an answer as to why those "Domain" entries are being added to the history, but hopefully this helps point you in a useful direction.
Good luck!