This must be a content problem, but so far I haven't found it - and it is new, it just started happening on a production site.
Using Chrome Version 31.0.1650.57 m, I can replicate this pretty regularly, and so far, not in any other browser.
the problem is on load, some dom elements are appearing out of order. That is, the dom has div1, div2, table1, div3, table2, etc., but the rendered web page shows table 2 above div1. There is not, as far as I can tell, any css that is causing it to be positioned strangely, and simply refreshing the page makes it render correctly. There are not errors in the console.
One caveat - the html is the output of a conglomerate of software and developers, and is not the best dom structure to begin with. But again, it is fine in all other browsers (so far), and it was fine in Chrome until recently.
Below are two screenshots* - the source, and the rendered output. Note that in the source, the H3 tag with the words "Items In Your Shopping Cart Below" appears above the highlighted element (the table containing the checkout button). But in the rendered html, you can see that the button is above the H3. Again, if I refresh the page, it fixes itself.
I am still troubleshooting this, will keep trying to find the problem, but hoping someone out there might have some idea what could be going on. I suspect it is to do with the carousel of images at the top, but that's been in use, unchanged, for a long time now, so not sure what's changed.
Shoot, I don't have the right creds to post images in my question! Here are links to the images:
https://www.dropbox.com/s/v4prpoinmc83f00/Chrome%20Cart%20Bug%20Source.png
and
https://www.dropbox.com/s/j092l7e1etebz07/Chrome%20Cart%20Bug%20Rendered.png
You can also (probably) reproduce this yourself. Got to www.storkie.com, and add something to your cart. No, I'm not trying to lure you into shopping there - just that's how to get to the problem. Anyway, it may come up fine on first add, but then, if you click the View Cart link at the top, it probably will come up as in the pictures.
Thanks in advance for any suggestions!
I have the same issue on a JSF Primefaces application and I couldn't find any unescaped characters.
The element order on my page changes every third or fourth reload, BUT I have an ajax poll (refresh) every 15 seconds and when this hits the page renders correctly.
I compared the source code before and after this ajax refresh, but there were no differences.
I know this is no solution, but maybe helps to get closer to one.
Edit:
I found an issue in chromium issue tracker regarding this problem.
https://code.google.com/p/chromium/issues/detail?id=322936&q=order&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
In any case, the issue should be fixed in next chrome version.
Just wanted to say that I have the exact same problem. A site that was last updated six months ago has recently started rendering elements out of order in Chrome.
For me it happens 2 out of 3 times I visit the page and it's as if rendering restarts when it hits a specific tag.
My code look kinda like this:
List
<span class="HistoryLink_Separator"> » </span>
<span class="HistoryLink_Last>Item</span>
Chrome renders the page fine until it hits the SPAN with the » (right double angle quotes) then it starts positioning elements at the very top of the page again.
Related
I was wondering if anyone has ever come across this issue before? I loaded up Chrome today and for some reason the entire left hand side of the elements section is broken.
I can navigate down using the keyboard arrows and see the breadcrumb selectors change (as shown in the picture) and for some reason the top of the document seems to display (but looks very odd indeed), but anything below the 'if greater than IE8' doesn't show whatsoever.
Has anyone ever experienced this before? Am i better reinstalling or launching a support ticket?
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!
I'm developing a mobile site in HTML for use on 2 Blackberry models, one quite old (8700v) and one newer (8520) as specified by the client.
The native browser on the 8520 is rendering my HTML/CSS pages perfectly. The native browser on the old 8700 is far from perfect however as the CSS support is minimal.
As a solution I decided to try installing Opera Mini 4.2 on the 8700. The rendering is great, speed is even improved but there's some rather strange behaviour happening with the hyperlinks on the page.
When I scroll down through my pages links are automatically highlighted and made ready for selection. This is fine until I have a number of links close together, for example in my nav menu. The nav menu is a set of links arranged within a . When I scroll to the menu all the links within the menu highlight at once. Even within the body if 2 links are on 2 separate lines (one stacked on top of another) the same issue appears.
I'm trawling Opera documentation but haven't found anything useful yet. Anyone got any ideas on why this happens and if it can be resolved?
Without seeing the actual HTML/CSS code, it's hard to pinpoint the exact cause of this, but it's most likely one of the following:
The links in question point to the same URL. The browser will highlight them as a group to visualize this.
Some script is adding a click event listener or similar to the group of links.
An <a>-tag has been left open.
I have this problem with a link in an HTML page where the first click on it is not working (I am using Firefox). The second click takes me to the corresponding link.
Furthermore, on the first click the parent element of this link moves a little bit upwards. So I assume this is a CSS issue, but since the problem is there only when clicking and not when hovering over the item, I am unable to see how CSS could be cause this problem.
(This issue is there with some other links in the page too, but with a different behavior: Clicking on the links changes the layout a little bit, but the first click itself takes me to the target pages.)
It is probably not a JavaScript issue because I tried disabling JavaScript in the browser with the same results.
(Sorry that I cannot post sample code). I just want to know if there is any known issue that may cause this problem.
Check if this issue occurs in every browser. If no - this is a browser issue.
If yes - check your CSS may be some problems in it.
If still can't find problem - put code examples here