Tile hover animation absent

[kellytang]

The original Phantom demo by HTML5Up shows a tile transition animation when you hover over it. However, the Hexo version doesn't (I am using Chrome). This issue also exists in the Hexo version demo. How can this be changed?

[klugjo]

I am using Chrome as well and the tile animation is working fine for me:

https://html5up.net/phantom

is the same as

http://www.codeblocq.com/assets/projects/hexo-theme-phantom/

Chrome Version 59.0.3071.115 (Official Build) (64-bit)

[klugjo]

I am not sure if that is what you are referring to but posts need to have a subtitle for the animation on the text to trigger:

Try to add

subtitle: Lorem Ipsum

in the front matter of one of your posts to see if that solves your issue

[kellytang]

Version 61.0.3163.100 (Official Build) (64-bit) Updated to Version 62.0.3202.62 (Official Build) (64-bit), issue still present.

I made a gif to demonstrate the issue (on Version 61.x):

https://imgur.com/a/6fQ3W

[klugjo]

It is working fine for me ...

Let me investigate once I am home tonight. Otherwise can help me debug ?

[kellytang]

Gladly.

[klugjo]

Working fine on my Chrome 61.x at home as well. I am not sure how to help here.

Do you get any errors in the console ? Are there other feature/animations not working ? What about the menu ?

Where are you based ? Are there any of the resources used by the site that are being blocked by your ISP ?

[kellytang]

Console warnings:

The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in 2017/10/22/hello-world - Copy (3)/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in 2017/10/22/hello-world - Copy (4)/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in 2017/10/22/hello-world - Copy (5)/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in 2017/10/22/hello-world - Copy/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in 2017/10/22/hello-world/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in 2017/10/24/Hospital-beds-per-capita-in-the-Asia-Pacific/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in About/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in Highlights/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in about.md.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in archives/2017/10/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in archives/2017/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in atom.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in css/font-awesome.min.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in css/ie8.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in css/ie9.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in css/main.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/ie/html5shiv.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/ie/respond.min.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/jquery.min.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/main.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/skel.min.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/util.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in sass/font-awesome.min.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in sass/ie8.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in sass/ie9.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in sass/main.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in sitemap.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tags/Australia/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tags/China/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tags/Health/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tags/India/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tags/Japan/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tags/Korea/index.html.
The file will have its original line endings in your working directory.
[master 1101c65] Site updated: 2017-10-27 16:06:21

The menu works in both Chrome and Edge.

The tile animations (and corresponding subtitles) display in Edge but not Chrome.

The copyright name didn't show at first (it was just "Untitled"), which I fixed by diving straight into the theme's code.

The rounded corners in code blocks are broken in both Chrome and Edge, and so are the horizontal scrollbars in some cases. I've put together a demo of examples (working and non-working) here: https://kellytang.github.io/2017/10/22/debugging/

I am in Sydney AU. Nothing is being blocked by my ISP as far as I'm aware (or by my adblock).

[klugjo]

I see. I can reproduce the blockquote issue and will add a config entry for the copyright so that folks don't have to go in the code to change it.

I cant repro the code blocks issues nor the tiles animation problem though..

By console, I meant the Chrome Developer Tools console sorry.. Is there anything that shows up in there ?

Yeah you should not have any issues in AU

[kellytang]

Ah ok. Actual console:

allow right click processing https://kellytang.github.io/
rightclick.js:25

[klugjo]

Ok nothing then ..

[kellytang]

It seems this person had the same issue https://github.com/klugjo/hexo-theme-phantom/issues/16

[klugjo]

Yeah it looks like the same issue. I am not sure what his fix is all about though. I don't see all the body attributes that he talks about in my versions.

Are you using any chrome plugin that causes that ? (Ad block or something ?)

[klugjo]

Can you test http://liuqingwen.me/blog/index.html and let me know if you face the issue as well ?

If not we can check with that user how he fixed it.

Thanks

[kellytang]

I disabled all my extensions and cleared my browsing data but the issue still exists (on that user's blog too). Something notable though is that while that page loaded the hover animations appeared, only to disappear a few seconds later.

[kellytang]

Also is this meaningful to you?

index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Reg-webfont.woff
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Reg-webfont.ttf
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Sbold-webfont.woff
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Sbold-webfont.ttf
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Bold-webfont.woff
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Bold-webfont.ttf
index.html:1 Slow network is detected. Fallback font will be used while loading: http://liuqingwen.me/blog/fonts/fontawesome-webfont.woff2?v=4.5.0
index.html:1 Slow network is detected. Fallback font will be used while loading: http://liuqingwen.me/blog/fonts/fontawesome-webfont.woff?v=4.5.0
index.html:1 Slow network is detected. Fallback font will be used while loading: http://liuqingwen.me/blog/fonts/fontawesome-webfont.ttf?v=4.5.0
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGKhisFFF-0ifc-Simo8uwJs.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGNJvocFWY_5VFjYFbAOOIik.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGLGN1mc631ObjHzqJB_dFFA.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGI3P6ux3HwbL10a8ofNXGLA.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGD_j0nMiB9fPhg_k1wdK2h0.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGDRVvBvQIc1z78c__uoBcyI.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGH2tx1iQUBYLA4fTJZSoO3U.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGJaoTU19aO7Bfv-FLfOt5YM.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGHvBSgOUtlSCpvi6_8Wv308.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGO4f2SQTi4oYi3kh3bYmG2Y.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGDovqjS_dXPZszO_XltPdNg.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGFxe-GPfKKFmiXaJ_Q0GFr8.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGMKLL5CtqrIC1MmqTPxryYA.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGLttwilxDzpVRPUtYE2He8E.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGMqNlGGfRq7bLR7KpoutytU.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGDN0peKJ_L8b-UGHSLXfhhU.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGLpVETArfVi9McBbsQ4atuQ.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGEfh7q1GW6w7vv_rRnRqMrY.woff2
chrome-extension://hompjdfbfmmmgflfjdlnkohcplmboaeo/js/rightclick.js:25 allow right click processing http://liuqingwen.me/blog/index.html
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Reg-webfont.woff
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Reg-webfont.ttf
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Sbold-webfont.woff
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Sbold-webfont.ttf
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Bold-webfont.woff
index.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/app/fonts/ProximaNova-Bold-webfont.ttf
index.html:1 Slow network is detected. Fallback font will be used while loading: http://liuqingwen.me/blog/fonts/fontawesome-webfont.woff?v=4.5.0
index.html:1 Slow network is detected. Fallback font will be used while loading: http://liuqingwen.me/blog/fonts/fontawesome-webfont.ttf?v=4.5.0
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGKhisFFF-0ifc-Simo8uwJs.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGNJvocFWY_5VFjYFbAOOIik.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGLGN1mc631ObjHzqJB_dFFA.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGI3P6ux3HwbL10a8ofNXGLA.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGD_j0nMiB9fPhg_k1wdK2h0.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGDRVvBvQIc1z78c__uoBcyI.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGH2tx1iQUBYLA4fTJZSoO3U.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGJaoTU19aO7Bfv-FLfOt5YM.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGHvBSgOUtlSCpvi6_8Wv308.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGO4f2SQTi4oYi3kh3bYmG2Y.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGDovqjS_dXPZszO_XltPdNg.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGFxe-GPfKKFmiXaJ_Q0GFr8.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGMKLL5CtqrIC1MmqTPxryYA.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGLttwilxDzpVRPUtYE2He8E.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGMqNlGGfRq7bLR7KpoutytU.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGDN0peKJ_L8b-UGHSLXfhhU.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGLpVETArfVi9McBbsQ4atuQ.woff2
index.html:1 Slow network is detected. Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/toadOcfmlt9b38dHJxOBGEfh7q1GW6w7vv_rRnRqMrY.woff2

[klugjo]

That warning should not cause the issue. It just means the fonts are taking some extra time to load.