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.
Related
I came across a weird bug with jsfiddle. The layout I get when I visit the site is completely broken. This bug happened when I dragged the vertical resize bar while my second display disconnected. See this the result:
There is probably a way I can get this fixed from the inspector by resizing it manually, locating left panels and changing their width manually and than playing with the vertical resize bar; I'l keep investigating.
Where are the layout positions stored?
Before asking this question, I tried to reset my cookies, I had a look into local storage and session storage (they were both empty). I know it's a local issue because jsfiddle is too awesome to break like that, it's not because of the code in the fiddle, I opened the fiddle in private navigation and worked like a charm.
Edit: I fixed my issue by deleting .column.left, #handler_vertical appeared, I moved it and now data is fixed, but I still don't know where this is stored ;)
I had this same issue and worked out that it was after I reduced the size of my browser window, I'd accidentally moved the vertical bar left, which caused this to 'disappear', so when I resized the window to full, no vertical bar!
To fix, I searched the inspector element for 'handler_vertical', and around this were column left and column right, with widths set inline. Simply remove these inline widths and it's back to normal.
Strange that some js is still adding itself even after clearing cache and cookies!!
I accidentally deleted an HTML node in Chrome's inspector, which broke JSfiddle's layout.
When I reloaded the page, I was surprised to see the layout was still broken.
I cleared my cache and made a hard reload, but JSfiddle's layout was still broken!
The solution came out recently : I changed Chrome's theme... and it fixed JSfiddle.
Sometimes you just don't want to understand.
I know this was solved a while ago, but I just wanted to add that the FAQ acknoledges this and pasting Layout.setWindowSizes(null)into the browser console fixes the layout.
Source: http://doc.jsfiddle.net/faq.html
Same just happened to me, reloading the site had no effect but deleting last cached elements made it
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 have run into a really weird bug. I have an element that the background colors drops off of until you take your cursor and select it.
Here is the page:
http://austinpray.com/test
Here is a video:
https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov
The video is taken with an iPhone because the issue does not occur when I am using a screen recorder oddly enough. It only happens inside of chrome. I have tried both chrome and a blank install of chromium will all caches cleared and such and this still occurs.
What am I missing? I will update as I do more testing on different devices.
EDIT (05/22/2013):
I did some more research and I found the following behavior:
https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov
The problem seems to arise when animation and scrolling happen at the same time.
I froze the entire site with the issue here: mirror
EDIT:
Example
Here is a stripped down version of my code that actually works:
DEMO
The issue is not present in this one. What is different about the following demo and the code that is causing the issue? I have tried stripping out the parallax background code and that does nothing to fix the issue. I am currently rewriting the entire menu's css to see if I missed something simple.
temporary workaround
After learning a TON about how chrome renders elements (especially fixed elements) I came across this temporary solution:
-webkit-transform: translateZ(0);
I added this to my nav bar's style. This is basically a quirky little hack that does nothing to the page and turns on GPU acceleration. This will have to do for now either until chrome is updated or until I rewrite the entire menu bar functionality. The only downside is that resizing the window suffers a performance hit.
a more elegant solution
After all this research and troubleshooting I figured out that the only real problem is that chrome needs to redraw the element all the way rather than stop at an arbitrary point and leave artifacts. Since the pure CSS solution creates some performance issues I I found an excellent method of forcing the browser to redraw an element via jQuery!
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
I'm using this on the deployed page and it seems to be working great with no performance hits. I'll keep it around as long as chrome 27 is still floating around.
I also found weird behavior and possibly the root of the problem:
The issue does not occur when I have Compositing for fixed position elements enabled in the chrome about:flags section (chrome://flags/). I am running Chrome Version 27.0.1453.93.
My issue is somehow connected with how chrome handles the stacking context of fixed elements and animating fixed elements as the browser scrolls. This article expands a bit on the changes.
How Chrome handles compositing
GPU acceleration as it related to compositing
As this answer showed up first when searching for this issue I thought it would be helpful to link to another answer that seemed to resolve the problem more fully.
https://stackoverflow.com/a/12023155/2192201
And if you don't feel like clicking through, all that was needed to prevent the artifacts while animating was this one line of css:
-webkit-backface-visibility: hidden
Problem:
When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. This behavior occurs in at least Safari and Chrome.
How to I keep everything in the proper, final place while the page loads?
Code:
HTML in question on codepad (with details changed for privacy reasons): http://codepad.org/GSGHYF0N
Stylesheet: http://codepad.org/Yr4ULwi0
Additional Info:
The most obvious thing that is out of place is the
<h2>Location</h2>.
Images are all the size indicated in the HTML and CSS.
This is not the problem where the entire layout shifts as one because a scroll-bar appears.
Resources
Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. However, StackOverflow won't let me post these links because of spam-prevention.
http://jsfiddle.net/QHeG8/
I can't replicate the issue but it could be caused by the webfonts loading and rendering.
That would explain why <h2>Location</h2> moves - because it's position relies on the width of the <h3>Tagline</h3>
You could try using standard system fonts to see if that resolves it.
Also if you have Dev Tools open that'll slow down page rendering and also disable your cache (if you have that option ticked)
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