Text suddenly disappears in Chrome

Question

I am about to lose my mind trying to figure out what is going on. I am starting to think that there are gremlins laughing at me in my computer.

I have a site that I designed about a year ago that I still maintain. I am the only one who manages the website and I have made no changes that would warrant the problem. I always work in Chrome so any changes I make are visible to me.

I was just checking something on the website and noticed that the menu text and footer widget text are suddenly not visible. When you hover over where the menu is located, they will appear one by one. If you go into developer tools and do anything to the nav or footer, they will reappear. I tried to force them to show using display or visibility and it works in the front end using developer tools, but not once I add it to the style sheet.

I have checked every other browser and device (even using Chrome) and all is fine. I have deactivated all of my Chrome extensions and done a hard refresh. I am running the latest version of Chrome on Windows 7.

Am I losing my mind here? Can anyone else replicate the issue? If so, what seems to be the problem.

Any help is appreciated.

Thank you.

I guess the website would help... wow sorry, it is too late for this right now.

http://www.thehudsonhairsalon.com/

Answer 1

I wanted to let everyone know that with the assistance of an amazing colleague of mine the issue has been found. I just checked the other person's problem via developer tools and they have the same issue and it can be resolved the same way mine was.

I don't know how this happened, but a mysterious div element found its way into my < head > section.

The culprit is as follows:

<div class="fit-vids-style">
­<style>               
.fluid-width-video-wrapper {
width: 100%;  position: relative; padding: 0; } 
.fluid-width-video-wrapper iframe,       
.fluid-width-video-wrapper object,        
.fluid-width-video-wrapper embed {           
position: absolute;                       
top: 0;                                   
left: 0;                                  
width: 100%;                              
height: 100%;}    </style></div>

I designed the site so long ago that I cannot remember how it got there, but find it weird that it only now starts creating a problem. The script was a custom.js so I am probably at fault for adding it. Not sure if where the script came from was at fault for the instruction on placement.

I have removed that div which should not have been in my meta < head > and all of the text is now behaving as it should and my responsive videos have not been affected by it's removal.

Hope this helps someone else.

edit.

Apparently Genesis Studio Press adds a module/plugin called Genesis Media Project that causes the same script to load "fit-vids" which adds that div into the meta header area. To correct the problem in the theme, access your site via FTP and append that plugin folder with .old

• problem solved!

One more note:

apparently this only affected PC version of Chrome.

Answer 2

.clearfix:after {
/* visibility: hidden; */

here is the problem. don't know exactly why but try to delete this rule and check