UI.X 1.5.22.0
- Thread starter Dad.
- Start date
Dakota Storm
Well-known member
@Mike Creuzer would it be worth you contacting Google support, they might be able to help you pinpoint the issue?
Jake B.
Well-known member
Just looked into the resource error list for the Fetch as Google simulator, and "Temporarily Unreachable" means this:
https://support.google.com/webmasters/answer/6066468?hl=en#resource_errors
The style doesn't have anything to do with files being served, I ran it on forums.xf.hexthemes.com and it worked every time except once when it told me that http://forums.xf.hexthemes.com/css.php?css=xenforo,form,public&style=3&dir=LTR&d=1444169265 was unreachable. A PHP file that is part of XenForo's core.
That said, we're still looking into the issue and what could be causing it. The web cache is behaving extremely odd, but I really don't think it has anything to do with the "temporarily unavailable" status on the simulator. The issue with the webcache is it sees the "Sidebar" class in the <html> tag and for some reason is applying styling for the "sidebar" class (note the case on the S in both). If you view the cache and inspect element on the html tag you'll see that it's applying the sidebar (with a lowercase s) class to the entire HTML block (see below):
But, as soon as I get rid of that Sidebar class the page behaves (somewhat) normally
Also note that the '.sidebar' element being applied is from the CSS file that was 'unavailable'. So that really isn't the issue.
https://support.google.com/webmasters/answer/6066468?hl=en#resource_errors
The style doesn't have anything to do with files being served, I ran it on forums.xf.hexthemes.com and it worked every time except once when it told me that http://forums.xf.hexthemes.com/css.php?css=xenforo,form,public&style=3&dir=LTR&d=1444169265 was unreachable. A PHP file that is part of XenForo's core.
That said, we're still looking into the issue and what could be causing it. The web cache is behaving extremely odd, but I really don't think it has anything to do with the "temporarily unavailable" status on the simulator. The issue with the webcache is it sees the "Sidebar" class in the <html> tag and for some reason is applying styling for the "sidebar" class (note the case on the S in both). If you view the cache and inspect element on the html tag you'll see that it's applying the sidebar (with a lowercase s) class to the entire HTML block (see below):
But, as soon as I get rid of that Sidebar class the page behaves (somewhat) normally
Also note that the '.sidebar' element being applied is from the CSS file that was 'unavailable'. So that really isn't the issue.
Last edited:
Jake B.
Well-known member
No, I'm also not having it on Xenith anymore either. It doesn't look like testing it with the fetch and render simulator is accurate to what google's actual webcache can see. The issues with the temporarily unavailable files on the simulator and the incorrect class on the webcache are completely unrelated. The missing css files broke all styling (including colors, header, etc).
Gemma
Well-known member
I'm currently disabling features which are unique to UI.X; I've just disabled the OffCanvas Menu and run some Fetch As Google tests and so far no errors have been produced (other than a few missing favicons from linked sites) on a dozen or so pages I've checked....could just be a coincidence though but I'll keep monitoring
DRaver
Active member
We've got another update on the issue. It would seem that Google is adding in html code before the <!DOCTYPE> and browsers see this and think you are doing something wrong. So they put the page in something called quirks mode, where css is case insensitive. This is, well, not good as XenForo itself uses a class that is the same word but differs in case and functionality.
Other people have noticed this as well. Why it is affecting UI.X we have no idea, but we are not sure why its deciding to add its markup where it is. Im going through our macro wrapper and nothing seems to be different to the default style besides a few things we've added in, like fontAwesome and other dependencies.
https://productforums.google.com/forum/#!topic/webmasters/7iVUjKkLjIg
Other people have noticed this as well. Why it is affecting UI.X we have no idea, but we are not sure why its deciding to add its markup where it is. Im going through our macro wrapper and nothing seems to be different to the default style besides a few things we've added in, like fontAwesome and other dependencies.
https://productforums.google.com/forum/#!topic/webmasters/7iVUjKkLjIg
Jake B.
Well-known member
Great example of that:
HexThemes: http://webcache.googleusercontent.com/search?q=cache:http://forums.xf.hexthemes.com/ (view page source)
The big chunk at the top was added by Google's webcache so it will show that bar at the top of the page. But if you go to another site http://webcache.googleusercontent.com/search?q=cache:http://forums.rivals.com/
You can see that they add the same chunk of code, but also an additional <!DOCTYPE html> before that chunk (and keep the one we have by default before the <html> tag
HexThemes: http://webcache.googleusercontent.com/search?q=cache:http://forums.xf.hexthemes.com/ (view page source)
Code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="http://forums.xf.hexthemes.com/"><style type="text/css">body { margin-left:0;margin-right:0;margin-top:0; }#google-cache-hdr {background:#f5f5f5 !important;font:13px arial,sans-serif !important;text-align:left !important;color:#202020 !important;border:0 !important;margin:0 !important;border-bottom:1px solid #cecece !important;line-height:16px !important ;padding:16px 28px 24px 28px !important;}#google-cache-hdr * {display:inline !important;font:inherit !important;text-align:inherit !important;color:inherit !important;line-height:inherit !important;background:none !important;border:0 !important;margin:0 !important;padding:0 !important;letter-spacing:0 !important;}#google-cache-hdr a {text-decoration:none !important;color:#1a0dab !important;}#google-cache-hdr a:hover { text-decoration:underline !important; }#google-cache-hdr a:visited { color:#609 !important; }#google-cache-hdr div { display:block !important;margin-top:4px !important; }#google-cache-hdr b {font-weight:bold !important;display:inline-block !important;direction:ltr !important;}</style><div id="google-cache-hdr" dir=ltr><div>This is Google's cache of <a href="http://forums.xf.hexthemes.com/" dir="ltr">http://forums.xf.hexthemes.com/</a>. It is a snapshot of the page as it appeared on Oct 20, 2015 00:18:46 GMT. </div><div>The <a href="http://forums.xf.hexthemes.com/" dir="ltr">current page</a> could have changed in the meantime. <a href="http://support.google.com/websearch/bin/answer.py?hl=en&p=cached&answer=1687222">Learn more</a></div><div></div><div><span style="display:inline-block !important;margin-top:8px !important;margin-right:104px !important;white-space:nowrap !important;"><span style="margin-right:28px !important;"><span style="font-weight:bold !important;">Full version</span></span><span style="margin-right:28px !important;"><a href="http://webcache.googleusercontent.com/search?q=cache:http://forums.xf.hexthemes.com/&strip=1&vwsrc=0">Text-only version</a></span><span style="margin-right:28px !important;"><a href="http://webcache.googleusercontent.com/search?q=cache:http://forums.xf.hexthemes.com/&strip=0&vwsrc=1">View source</a></span></span><span style="display:inline-block !important;margin-top:8px !important;color:#717171 !important;">Tip: To quickly find your search term on this page, press <b>Ctrl+F</b> or <b>⌘-F</b> (Mac) and use the find bar.</span></div></div><div style="position:relative;">
<!DOCTYPE html>
<html id="XenForo" lang="en-US" dir="LTR" class="Public NoJs LoggedOut Sidebar RunDeferred Responsive not_hasTabLinks hasSearch activeSmallLogo navStyle_2 pageStyle_1 hasFlexbox" xmlns:fb="http://www.facebook.com/2008/fbml">The big chunk at the top was added by Google's webcache so it will show that bar at the top of the page. But if you go to another site http://webcache.googleusercontent.com/search?q=cache:http://forums.rivals.com/
Code:
<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="http://forums.rivals.com/"><style type="text/css">body { margin-left:0;margin-right:0;margin-top:0; }#google-cache-hdr {background:#f5f5f5 !important;font:13px arial,sans-serif !important;text-align:left !important;color:#202020 !important;border:0 !important;margin:0 !important;border-bottom:1px solid #cecece !important;line-height:16px !important ;padding:16px 28px 24px 28px !important;}#google-cache-hdr * {display:inline !important;font:inherit !important;text-align:inherit !important;color:inherit !important;line-height:inherit !important;background:none !important;border:0 !important;margin:0 !important;padding:0 !important;letter-spacing:0 !important;}#google-cache-hdr a {text-decoration:none !important;color:#1a0dab !important;}#google-cache-hdr a:hover { text-decoration:underline !important; }#google-cache-hdr a:visited { color:#609 !important; }#google-cache-hdr div { display:block !important;margin-top:4px !important; }#google-cache-hdr b {font-weight:bold !important;display:inline-block !important;direction:ltr !important;}</style><div id="google-cache-hdr" dir=ltr><div>This is Google's cache of <a href="http://forums.rivals.com/" dir="ltr">http://forums.rivals.com/</a>. It is a snapshot of the page as it appeared on Oct 21, 2015 11:07:12 GMT. </div><div>The <a href="http://forums.rivals.com/" dir="ltr">current page</a> could have changed in the meantime. <a href="http://support.google.com/websearch/bin/answer.py?hl=en&p=cached&answer=1687222">Learn more</a></div><div></div><div><span style="display:inline-block !important;margin-top:8px !important;margin-right:104px !important;white-space:nowrap !important;"><span style="margin-right:28px !important;"><span style="font-weight:bold !important;">Full version</span></span><span style="margin-right:28px !important;"><a href="http://webcache.googleusercontent.com/search?q=cache:http://forums.rivals.com/&strip=1&vwsrc=0">Text-only version</a></span><span style="margin-right:28px !important;"><a href="http://webcache.googleusercontent.com/search?q=cache:http://forums.rivals.com/&strip=0&vwsrc=1">View source</a></span></span><span style="display:inline-block !important;margin-top:8px !important;color:#717171 !important;">Tip: To quickly find your search term on this page, press <b>Ctrl+F</b> or <b>⌘-F</b> (Mac) and use the find bar.</span></div></div><div style="position:relative;">
<!DOCTYPE html>
<html id="XenForo" lang="en-US" dir="LTR" class="Public LoggedOut Sidebar Responsive hasNavAtTop hasTabLinks hasSearch navStyle_1 pageStyle_0 hasFlexbox hasJs NoTouch HasDragDrop rgba draganddrop no-csspositionsticky no-supports canvas canvastext no-emoji fontface no-touchevents borderradius cssanimations csstransforms no-csstransforms3d csstransitions flexbox flexboxlegacy" xmlns:fb="http://www.facebook.com/2008/fbml" style=""><head>You can see that they add the same chunk of code, but also an additional <!DOCTYPE html> before that chunk (and keep the one we have by default before the <html> tag
Jake B.
Well-known member
As you can see Font Awesome and the avatar is not loading from Google.
Those aren't loading because of Cross-Origin Resource Sharing being disabled
Honestly, we still don't know.
Jake B.
Well-known member
It should show up inside the notice for the add-on update, but:
Most of these changes though won't work entirely until UI.X 1.5.2.0 is released (hopefully soon)
Jake B.
Well-known member
She's just disabled the off-canvas navigation, so the webcache may have recached the CSS but not the actual page markup yet.
Gemma
Well-known member
Put that page through Fetch As Google test and it came back with one error
I don't really know why I get an error - I have no robot.txt file so don't know why it says it is getting blocked by it. I also don't know why anything to do with UI.X would throw up an error like this. And I've no idea what the file is that is getting blocked.
Saying that though. I'm not very technically minded or have much knowledge of these things
Cyb3r
Well-known member
That was fast, how did you do that?
Before 10 minutes HexThemes was messed up just like others, how it got fixed so fast?
Anyway I'm glad you guys have figured this out.
kylerc
Well-known member
After looking into this cache issue extensively, We have found this occurs outside UIX themes as well. To summarize some earlier posts, the issue is caused by styling for
applying to
(note the case change on the 's' in 'sidebar'). XenForo uses both of these by default and this would normally work fine as CSS class names are generally case sensitive. The exception to this is when a browser is working in Quirks Mode. "In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive. (This also applies to getElementsByClassName.)" - https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior . Every page that has the cache bug is missing an initial
at the start of the source of the cache. Instead, the page begins with HTML code which seems to cause some browsers to go into Quirks Mode causing the .sidebar styling to also apply to .Sidebar. With no changes being made to the site itself, this issue will seemingly randomly go away if the cache updates.
This does happen on UIX (as mentioned earlier in this thread) but is not specific to just UIX. An example of this can be found at http://webcache.googleusercontent.com/search?q=cache:http://www.manutdtalk.com/index.php?forum/ in the
cache (likely will be fixed when the cache updates).
We're including the following code in the next version of UIX to address this, but as I said, this issue is not caused by UIX and seems to be related to Google incorrectly caching pages.
This code will only run in Quirks Mode (when classes are no longer case sensitive) so the fix is only applied when it is needed.
Sorry for all the confusion about this issue, I hope this helps clear things up.
EDIT:
The webfonts issue ("Font from origin...") is a separate issue. Essentially, your browser is trying to prevent what it thinks is intellectual property theft of fonts. Your browser sees a third party website (the cache) trying to load a font from your site when your site is not configured to allow third party websites to use its font. http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/ has more information on the issue. This also is not specific to UIX ( http://webcache.googleusercontent.com/search?q=cache:http://www.christianforums.com/ also has the issue).
Code:
.sidebar
Code:
html.Sidebar
Code:
<!DOCTYPE html>This does happen on UIX (as mentioned earlier in this thread) but is not specific to just UIX. An example of this can be found at http://webcache.googleusercontent.com/search?q=cache:http://www.manutdtalk.com/index.php?forum/ in the
Code:
. It is a snapshot of the page as it appeared on Oct 19, 2015 12:25:21 GMT.We're including the following code in the next version of UIX to address this, but as I said, this issue is not caused by UIX and seems to be related to Google incorrectly caching pages.
Code:
html.sidebar {
width: auto !important;
float: none !important;
font-size: 100% !important;
}This code will only run in Quirks Mode (when classes are no longer case sensitive) so the fix is only applied when it is needed.
Sorry for all the confusion about this issue, I hope this helps clear things up.
EDIT:
The webfonts issue ("Font from origin...") is a separate issue. Essentially, your browser is trying to prevent what it thinks is intellectual property theft of fonts. Your browser sees a third party website (the cache) trying to load a font from your site when your site is not configured to allow third party websites to use its font. http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/ has more information on the issue. This also is not specific to UIX ( http://webcache.googleusercontent.com/search?q=cache:http://www.christianforums.com/ also has the issue).
Last edited: