I've been aware of this issue for sometime but sadly not had the downtime to address, but I want to ensure that its actually a problem before wasting my time. The problem that I have is that Google's cache displays a blank page, but heres the thing, if you reduce the VIEWPOINT the page displays fine.

Basiclly my website uses 3 media queries that define the navigation of the site, like so:

  • Small Screens (max-width: 40em) uses a Hamburger Menu
  • Medium Screens (max-width: 64em) uses a standard top bar menu
  • Large Screens (min-width: 64.063em) uses a custom slide menu

Both the Small and Medium viewpoints work using the cached version but sadly the Large does not, Bing works absolutely fine! so this brings me to the question(s):

  • Should I be concerned by this?
  • What's causing this to happen?
  • This is odd... I was checking out your site. I go to the portfolio section then when I hovered over portfolio, I saw the word portfolio in huge letters half off the screen. I'm using Opera 11.60 for linux. All I could say is the more compatible your website is to all browsers in the world, the more correct it will be displayed by other rendering engines because some engines are old and cannot understand new syntax (like the CSS vw or wv measurement unit) – Mike -- No longer here Feb 18 '16 at 2:50
  • Hey Mike, Opera 11.60 is more than 5 years old and the HTML5/CSS3 spec has new standards, new code & so forth. I believe the menu issue is caused by width: calc(75% - 100px) , I suppose I could add width: -o-calc(75% - 100px); then again considering I've had 1 person (you) in the past 12 months using this version it would be a complete waste of time tweaking the experience for a target audience I don't need. 99.999% of my customers do not have a issue using the site, in fact I don't want the type of customers who use old browsers because those type of sites will suck in my portfolio :) – Simon Hayter Feb 18 '16 at 10:07
  • @SimonHayter i think it could be at least partly a browser issue. See it in Win7 at latest Chrome, but not in latest FF (here is the cache page blank with and without resize). Another thought: G crawls with different settings. After it realized, the site has media queries, it crawled as user with low display size. – Evgeniy Feb 18 '16 at 12:32
  • 1
    @Mike not sure where your getting your research from because your so far from the Truth. Africa for example has more users browsing the net using Android devices than desktop computers, the majority of those users use Jellybean upwards, which means the latest Chrome, Firefox and so forth... Also, if Africa is a target region of yours (which I doubt) then you should be using a CDN proxy to reduce your first byte. Cloudflare operates in several data centres in both south and north Africa. – Simon Hayter Feb 19 '16 at 1:06
  • 1
    It would seem this was a temporary issue by Google and has resolved itself. – Simon Hayter Feb 24 '16 at 10:24

I think the cause are your media queries. Google crawls with different settings and after it realizes, there are media queries, it crawls with user agent, which display size is lower as full screen.

I tested this issue at Chrome and FF: the page begins to be displayed after the window is resized to 1026px width: it seems like would your media queries hide the content after 1026px: enter image description here enter image description here

  • The media queries does not hide the content on the live site through, the resizing of the viewpoint works fine. – Simon Hayter Feb 18 '16 at 13:13
  • do you realized, that your site version, which loads for displays bigger then 1026 width, is completely not cached? the cache site is empty, till the display get 1026px, the the cache shows the site version for displays lower as 1026px. – Evgeniy Feb 18 '16 at 13:35
  • Yes, lol... your telling me all things I know... question is why, and should I be concerned :) – Simon Hayter Feb 18 '16 at 19:56
  • You have btw. in both css files12 different min and max width settings, and more then 3 media queries, based on them: 4 different min-width: 40.063em, 64.063em, 90.063em, 120.063em, and 8 different max-width: 31.5em, 40em, 64 em, 71.25rem, 1150px, 90 em, 120 em, 99999999em. I'm pretty sure, that they do the mess:) Unbundle this knot! – Evgeniy Feb 18 '16 at 22:37
  • There is no limit how many media queries you can have as long as they exercute in order which they all do. The issue seems to be related to .js .sbMainContent { position: absolute; }, using FireBug if you add position: relative; it kinda displays some of it, but this doesn't explain why... :) – Simon Hayter Feb 19 '16 at 1:27

Not the answer you're looking for? Browse other questions tagged or ask your own question.