I am currently making a video streaming service where the video is transcoded in chunks of roughly 1MB each. The HTML5 player of Firefox, Chrome and IE all try their best to request partial content (by adding the Range header to their request). Unfortunately, most of the time this header looks like this:
Range:bytes=0-
I don't want to return the full content, but only 1MB of the content, so I return this:
Content-Range:bytes 0-1048575/5074944
Now Chrome accepts this completely and keeps requesting partial content until it has reached the total length. Firefox however makes only one request which contains the partial content and not the full. Firefox thinks it is the full content and thus not the full video is being played, only part of it. How would I get the same behavior in Firefox as I have in Chrome? I tried returning 416 Range not Satisfiable but both Chrome and Firefox seems to requesting after receiving this status code.
So I finally gave up on this and had a look at the source code of Firefox. At the place where Firefox receives a different range than expect, a comment is placed by a developer asking what to do in this case. The specification does not specify what to do in such case and so Firefox chose to do nothing. Chrome is a little more creative and came up with what the developers thought would be the best response (which is absolutely the result I want).
It seems like I am not the only one with this problem, otherwise I wouldn't have gotten upvotes. The thing is: to make Firefox correct this problem we would need to make a change to the specification which I believe to be close to impossible. Therefore I am closing this question and marking this post as the answer.
The answer to the question 'How would I get the same behavior in Firefox as I have in Chrome?' is to upgrade to Firefox 57.0 (Quantum). This version of Firefox (in tests of my own server code, which does the same limiting of partial response size) is able to make requests for additional partial content as the video plays, in much the same way as Chrome and IE.
Having said that, if I seek backwards in the video, Firefox will play a portion of the content from the new position (presumably using the cached partial content for that position) but then fails to request (or use cached) partial content when the buffered content runs out - instead it jumps to the end.
It looks like the Firefox developers made a stab at fixing the issue of smaller-than-expected partial content, but have not got it quite right with respect to seeking and/or caching.
I would be interested to know where in the Firefox source was the original comment about "what to do", to find out what has actually been done and perhaps provide appropriate feedback to the Firefox developers.
Related
I have a new website with a set of favicon images auto generated from a source file using Real Favicon Generator, and there are:
9 Apple favicons
1 Android favicon
3 named favicons
1 Safari pinned SVG
1 json manifest
1 set of Microsoft tile image/colour
Obviously most of these can be placed for their respective vendors - Apple, Microsoft tiles, etc.
I have an issue in that running the website on Firefox, I want the favicon it uses to change but I do not know which one it actually uses?
I have read this question but the stated answer on here is incorrect and
Firefox and Safari will use the favicon that comes last.
is no longer true.
Obviously it's a time consuming repetition to go through ~15 images to find the one that gets changed on one browser, and I actually found that Firefox 42 selects the 96x96 dimension favicon, rather than the last one presented.
Question:
Is there a way [aside from trial and error] to load a page and then find a declaration in the browser defining which image from the HTML head is used as the page favicon in that browser?
Additional Information:
There is an incomplete reference list here. However, this misses out various versions and various OS, and I can only assume these details where found from trial and error.
While this is useful, the various links and solutions on that question give a single URL result for an automated process, such as
http://www.google.com/s2/favicons?domain=www.domain.com
Which works fine in returning a valid favicon but it does not return the favicon that my browser uses when I tested it.
Other links from that question are similar, most only returned a 16x16 favicon and many clearly did not return the image used. Some probably didn't return the image used... it is hard to differentiate 16x16px sometimes!
You can use the Compatibility test of RealFaviconGenerator. The test will ask you which icon you see. But there is a twist: the test is not really for the end-user, so you will have to right-click the image corresponding to the icon you see, inspect it, and look at the alt attribute of the img tag. But that will prevent you from playing with 20+ images to make them different. Much easier!
Full disclosure: I'm the author of RealFaviconGenerator.
Note: I would be interested in your investigations to fix the answer you mention (I'm his author).
Using the Inspect Element, or just Inspect tool, available in Firefox and Chromium. The Network tab shows all http operations related to reload. Filtering by 'favicon' most likely peeks the correct operation, when the page is reloaded.
The fact that the browser downloads an image is a strong hint of what gets displayed. Yet, doubts can persist, e.g. which part of an .ICO. Unfortunately, the tab is a computed element not visible in the (computed) page source.
On Firefox, the iconuri is visible in the json code of exported bookmarks.
The "postMessage" is an HTML5 API, it is available in all major browsers including IE8/9. What I am trying to do is to create a popup window from a page, and be able to talk to the popup window using "postMessage". This works in every browser except IE8/9. Disappointed!
It looks like IE8/9 only allows the communication between iframes, but not between two windows, even the windows are within the same hierarchy.
I found that .postMessage() in IE9 was unreliable unless I used Strings.
My workaround was to simply call .postMessage(JSON.stringify({object: 'data'})) and use JSON.parse() in the onMessage() function on the other end.
The .postMessage method works, you just need to understand how it works from IE8 and up. Unfortunately, for IE8 and IE9 it will not do what you're seeking (though it does in IE10). While you can send messages between frames in IE8/9, you cannot send messages to a separate window.
There is a work-around that works in some instances. Martin Beeby discusses it in the last paragraph of his blog post on the issue: PostMessage Popups and IE.
For more on this, and a few other caveats, see Eric Lawrence's post on MSDN.
A friend of mine threw a website I made through the tool at http://analyze.websiteoptimization.com/ . When he came back to me, he insisted that my browser was preloading tons of unrelated images on only the homepage of the site.
I came back to him, insisting that YSlow (and other 'network' tabs in browsers) prove that only specifically-displayed images and content gets loaded on the homepage-- nothing else. I insisted that the statistics from that site are only for a complete visiting of the site, and downloading all the required images.
However, he's not convinced, believing that some browsers (i.e. IE) will pre-load that unrelated content regardless. For that reason, he uses a global CSS stylesheet, and then applies changes to individual pages by loading a separate stylesheet.
I thought it was best practice to minimize requests to the server, not to add more, which is why we have CSS sprites. I also thought browsers never load images unless they're needed to display the page.
I don't believe I can accept an answer without healthy discussion.
Am I correct in that the browser's not loading EVERYTHING on every page?
Is the above tool incorrect?
Is the lesson my friend's learning from the tool's results incorrect?
Thanks.
The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)
The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.
When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.
According to me
Browsers do load cached images at time but newer updates can check if the image has changed. Also there are permissions which coders can set to allow browser caching or not.
when using yslow or Google page speed which is a better tool try and use control+f5 to refresh your page so the site is forced reloaded without any offline files.
You can also set Brower permissions based on your preferences.
I also want to add a little about your last line a browser will load all images linked in the code even if there css property is hidden.
It always loads thing in the img tags first and then all images in the css code.
It will also process the image request in sequential order ie first come first server
I hope this help.
I have a rather strange bug which i can't make sense of that is apearing in webkit based browsers (chrome and safari).
When this page http://bluprintliving.mammalworld.com/turnmill-street loads for the first time the content seems to jump out of the container but only at the end of the render. on refresh it stays in and behaves. Generally the page in cache and out of cache looks different.
Anyone have any ideas or clues they can shed on this issue?
Much appreciated.
Shadi
** Update **
Bug appears in:
Chrome: 4.1.249.1064 (45376)
Chromium: 5.0.349.0 (40908)
Safari: 4.0.5 (531.22.7)
It could very likely be the document.write of the CSS tag in your cufon.js script.
Webkit browsers have some weird issues with inserting document.write at random times during page load, especially on un-cached loads. It's far safer to use DOM compatible insertion methods than to use document.write for adding content to the page. (NODE.appendChild() comes to mind)
I didn't dig deep enough to see if your issue could be explained by that file loading late, but if you're utilizing any CSS code from that file on your front page it may be getting loaded well after the actual content of the page, thus causing your "jump".
What makes me think of this is that I've come across this before when using Tiny_MCE, which was using document.write to insert code in much the same way, and having problems with the code appearing at random places in the document.
I'm currently finishing up testing a new Ruby on Rails app. Just recently, some of the pages do not seem to finish downloading in IE8. In FireFox, Chrome and Safari, everything works perfectly. The pages all validate successfully using the W3C validator.
When I view the page source in IE8, the page has been chopped off around 75% of the size it should be. IE8 claims the page is finished loading, and doesn't give any errors, but of course the page isn't rendering properly.
Has anyone seen this before? I'd really appreciate any help.
Have you tried to watch the http requests, using something like Http Analyzer or HttpWatch (like firebug for IE)? That might shed some light if there is a problem with a JS or CSS file not being found, or if the server is returning something other than a 200.
HttpWatch has a free version at http://www.httpwatch.com/download
IE8 Comes with a built in developer toolbar. Just press F12.
You should be able to diagnose most problems using it.
Also, open the page in Firefox with the Webdeveloper Toolbar addon and check if any javascript issues are arising. I find that sometimes you may only see the error in IE8 but you might only figure out what is wrong using Firefox. Give it a try!
There was a javascript call in the page that needed to be wrapped with:
document.observe("dom:loaded", function() { ... };
in order to work in IE. Apparently, it was disruptive enough to kill the entire page render. Thanks BenTheDesigner!
Since this is the first result on a Google search for IE8 not completing a page request, I thought I'd add on that I've seen the same symptoms caused by Sophos Anti Virus' Browser Helper Object which interferes with page requests and thus doesn't complete download requests every time.
Hitting F5 resolves the issue most of the time but a click to the next page can cause it to reappear. Other symptoms include odd page rendering of background images, incorrect repeating or no repeating being done at all despite a CSS declaration specifically telling a background to repeat. I spent a week debugging my CSS and XHTML only to eventually try disabling all the browser "Add-ons" and all of a sudden the issue went away.
I nailed it down to Sophos' BHO and now no rendering issues.