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
Related
I'm having a weird issue with my company's website. There is a blink when you load, with no CSS applied. I thought it just meant the CSS was delayed, but looking at the loading timeline:
It seems the CSS is applied, then after 400ms it stops being applied and then after ~500ms it is applied again.
I'm unable to see what could cause this kind of issue.
How to replicate:
Go to this site. Press Enter on the address bar (for some reason the problem doesn't appear when simply refreshing).
The problem appears only when cache is not disabled.
Replicated on Chrome and Firefox, doesn't seem to appear on Safari.
Doesn't appear when running as a localhost
Doesn't seem to be affected by presence/absence of adblockers
Found a fix, still haven't found the reason.
The fix:
Move the CSS before the JS in the header. This shouldn't have an effect, but apparently it does in this situation.
The reason:
As far as I can tell, the problematic flow is the following:
1 - The browser gets the CSS from the cache and applies it
2 - The browser for some reason realizes it should use the header's CSS instead, and removes the cache CSS
3 - The scripts (mainly google analytics) delay the CSS loading enough that we can see a bit of no css website
Still don't understand point 2 at all, but the fix works. And I'm paid to make it work, not to understand it, so question closed.
for some reason my checkboxes will not work inside some divs.
They cant be checked and are around half the size they normally are...
They work in firefox, but not chrome and they dont even show in safari...
This is not a live site so cant give a link, but its just a basic checkbox code.
I have had a look around the css of the containing div etc but nothing seems out of place.
Any suggestions on what i could look for? Sorry if theres a lack of information.
Take a look at the computed style tab in the source view of chrome by pressing f12. You can then see all the styles that are applied to it and also add new styles. Experiment with it till you get the wanted result. Also, you can use jsfiddle.com for posting bigger blocks of code.
Cheers!
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.
I am working on creating a website with a background that transitions with a fade. I have an issue with display when viewing with Firefox. The site loads fine and cycles through the images, when the point comes for it to return to the first image it resizes to a tiny pic in the top left corner. This does not happen on any other browsers, and it does not happen with all of the images in the cycle. If I refresh the page the problem is fixed and the sizing issue goes. I have tried from other computers and the problem is consistent. A version of the site can be seen http://www.rhys-williams.webspace.virginmedia.com/ Any help with this issue would be a big help thanks.
SOLVED
I have resolved this problem. The issue is caused by the cycle changing quicker than the image loads. I added a second to the display time and it now displays fine :)
Remove div from this line -> so your code will look like:
<div id="slideshowContainer" class="slideshow">
I guess that firefox was confused because of it.
Edit: Also, there are few unclosed tags (html errors), but i think this was the main reason of problems. Also, document has no valid declaration... fix these things, and then try... i have tested locally, with base href, and all works fine?
Hm -> please try to remove this, too: next: '.slideshow'
next option should have selector for next button, if i remember well...
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.