Hi there, sorry for the delay, I had to clone the site in order to check – so if I switch to the Twenty Fourteen theme, there is no issue when loading the page in edit mode. As soon as I switch it back to Enfold, same issue occurs again. Given that it’s only the homepage where this happens, and even if i create new versions of it from scratch the same problem appears, I am assuming there is something in the page content/shortcodes which is causing it to fall over. I can give you access to the cloned site if that would help?

Thanks

I have noticed this effect since 2.5. However since my Chrome updates automatically I cant say whether this flaw would show up with an older release of Enfold and Chrome 32.

And of course this is a browser issue. And as I wrote many times it does not happen with each Chrome installation. Moreover I have provided detailed information which css parameters (duration and y2 coordinate of cubic-bezier) of -webkit-animation help to solve the issue. Together with the Chrome installation I have setup for you on a virtual machine you should be able to locate the issue which is definitely caused by the jQuery function fn.avia_sc_animation_delayed.

Because Safari shows a flaw to this seems to be a general webkit problem. For me this sounds like a reintroduced clipping issue (which has been reported many times for chromium). You can close this ticket as I workaround the issue by overwriting the css declaration. Since I found the workaround my posts where meant to provide you with as much information as possible to either fix the issue with the jQuery function or to file a report with Chrome. However now you and the community know the issue exist and how to fix it.

Regards

Michael

Solved it…kinda

If the box-shadow color is not specified in the sonar effect than it will inherit the color of it’s element. read about it here
So, if I go into the shortcodes.css and delete all of the colors from @keyframes sonarEffect the sonar color will inherit the color of the icon!

/*sonar effect*/
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;transform: scale(1.5);opacity: 0;}
}

The problem is that I went into the parent theme folder to make this change. So, any updates will wipe it out.

I read here that even if I copy ‘shortcodes.css’ into a child theme folder that the child theme may not use it, relying on the parent themes CSS instead.

Any tips?

Done and Done. Thanks Josue.