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)
Related
Hay, I have problem with google cache. I want the homepage of my site in google cache will be shown correct and not broken, like the source. this is the source:
https://www.fnx.co.il.
the cahed page is here.
I googled it and I found answers to check if links are up-to-date, or to check reltive links. it is not the problem. even what is missing is font files. the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
is there way to prevent from google to add its elements to the page, or another solution that will make the cached page look good?
To start with, you have an error in your normal page that you would need to fix first:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
That means you are initialising fullPage.js multiple times and that's why scrolling down in a Macbook trackpad (or some other kinetic scrolling devices) will scroll more than one section at a time.
Make sure to fix that first.
the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
It doesn't seem to be the issue. The fullpage.js site is displayed almost correctly (besides the top margin issue) in Google cache
I would try to use the latest fullPage.js version (3.0.5) and then see if you still have the issue.
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.
As a quick intro, I'm not sure what the best way to phrase/tag/etc this question is, especially as it's so not really reproducible so I would appreciate any input from the stackoverflow community.
On a couple of different WordPress websites I help manage, I occasionally see HTML link elements overflow their normal inline position - the link text overlaps any text after it, almost like the link is absolutely positioned. However, the links are statically positioned and inline as normal.
The big problem with this is that it's not consistent and I've not been able to reproduce the problem. This makes debugging and tracking very difficult. I work mostly in Chrome on Windows 7/10 but I have had reports from clients seeing it in IE and occasionally in Firefox (all on Windows I believe).
In addition, when I have been able to use the Chrome developer tools to debug this, the problem resolves itself if the browser window is resized or if almost any link css properties are changed. It's as if the browser draws the page wrong the first time and when it's forced to redraw the elements, it does it right the second time.
Is anyone else seeing this problem? Does anyone have any ideas what would be causing this and why it would be so inconsistent?
I've not been able to get a screengrab of the issue happening as it's not possible to replicate but I may update this question if I manage to capture it happening any time soon.
I'm using Bootstrap to build a webpage. The page looks as it should on desktops and laptops. However, when viewed on mobile phones, the bottom half of the page's content is cutoff. This happens only on mobile phones or windows resized smaller than 991px wide.
I tried sifting through the included Bootstrap CSS file but couldn't find any style rules dictating any behaviors like the one I describe.
I've attached two screenshots: Fig. 1 is the intended behavior--the content ends with the embedded contact form. Fig. 2 is the puzzling behavior--the page just ends in the middle of the pricing table.
The site is grillemasters.info
[Fig. 1] http://i.stack.imgur.com/uH7MB.png
[Fig. 2] http://i.stack.imgur.com/h2190.png
Without seeing more information (e.g. try to post the minimum amount of HTML that still exhibits this error) it's hard to prescribe a solution. But here are three possible things to check out:
Mismatched (Incomplete) DOM
If you have an open-element (e.g. <div>) without its close (</div>), HTML behaves in mysterious and often irreproducible ways. This often includes mis-styling all elements after the mismatch.
Bad Character or Incomplete File
If you are uploading via FTP and the connection is interrupted, you may only be looking at a fragment of the file. Try deleting and re-uploading. The same thing would happen if the browser or FTP client encountered a character that made it stop reading the file — both of which might lead to a mismatched DOM.
Unnecessary body CSS
Make sure you don't specify the height of body or html anywhere (or any other global, all-containing elements). The page should flow naturally, without you specifying a height: 100%.
[EDIT] I looked at your site (which redirects to http://www.supsean.com/grillemasters/, in case others are interested in debugging outside a frame). Look at the top of your page when you resize the screen to such a small size; there are quite pervasive CSS issues, likely caused by position: fixed or absolutes where they needn't be.
Try resolving that, and I suspect you'll stumble across the solution to this question as well.
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.