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.
Related
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed it.
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.
http://pastorcarepbr.com/
I HTML validated it and it looks just the way I want it to in Firefox but in Chrome and Safari the #main div doesn't have the background color showing and the break tag with css set to clear both doesn't clear the way it does in Firefox.
I can't figure out what I did wrong considering it works fine in Firefox and it also HTML validates. Can anybody take a look at it?
Also, is this a coding error or a Web Host problem? I keep getting an old and new version of the Web page depending on if I do a simple refresh or a Ctrl+Shift+R refresh.
As mrtsherman and Nicole said, it was just the cache. Private browsing shows consistently.
you need a <div style='clear:both'></div> right before the #main closing tag. I shouldn't have anything to do with your browsers cache or web hosting.
I think it is probably a caching issue. The page seems to render fine to me. Here is quick tip. To take caching out of the picture, open up an incognito/private browsing instance. Then let us know what you see. I think this will resolve it. If this is the problem then you can version your CSS files by appending .css?version=1.1 for example. If you do this server side you can append a timestamp to do this automatically.
:)
To help out a bit more 1. You should provide the code you are working with. It is a major help in trying to figure out what is going wrong. And 2. the old and new version of the web site sounds to me like you need to clear your browser cache.
Check out the bottom of this page in Chrome (10.0.648.134): http://seatgeek.com/jobs/
The page mysteriously extends well beyond the footer. I'm perplexed by this because:
Looking a the web inspector, the web inspector is saying that the html ends at the end of the footer, so it's hard to know how to debug this.
This only happens in Chrome (not even Safari)
It doesn't happen on any other pages on my site except for the jobs pages
This isn't JS-related; I've turned off JS and it still happens.
It's a reported chrome bug: http://code.google.com/p/chromium/issues/detail?id=75815
I would wait for fix.
You might want to validate your mark-up first. There are a few errors.
I've seen strange behaviour before in Chrome with invalid mark-up. In fact it was a difference between Chrome 8 and 10 that caused problems for me in the past with invalid mark-up, so that might explain it.
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.