Pro Editor Menus Are Transparent

I’ve disabled all of the plugins on my site, tried Chrome, Internet Explorer, Edge, and Firefox all with the same result. I do have quite a bit of Global CSS that as you can see is also transparent and I can not seem to select it to copy it. I’m very hesitant to just delete it without having a copy. I upgraded from X to Pro a couple of days ago. After the upgrade, my Nextgen Pro pricelists were all gone and when tring to add, edit posts the editor wasnt available at all. I went into settings and noticed that Posts were not enabled so I enabled them. The transparency issue exists in anything (posts, pages…) that I try to edit with the editor.

Hi,

Please check for the following first:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Just note that the latest version of PRO is V2.3.8 Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  5. Remove custom CSS, Javascript and templates.

  6. Contact your host to increase your allocated memory and max execution time or do it yourself by adding this code in your wp-config.php

set_time_limit(300);
define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

7 Make sure you have the latest version of wordpress 4.9.8

8 Make sure you have the following versions of PHP and Mysql

PHP version 7.2 or greater.
MySQL version 5.6 or greater

Please try all these and if it still doesn’t fix the issue, kindly provide us your wordpress and ftp login in Secure Note

Thanks.

PHP Version 7.2.12, WP is version 4.9.8. All plugins install are up to date. Pro version is 2.3.8. I disabled all plugins, cleared browser cache, removed .htaccess, PHP memory limit was already 768M. Providing login information in secure note. Restored everything back to original state prior to my troubleshooting.

Hey @mkosinski,

Something in your server or WordPress setup is not supporting and/or preventing CSS variables to work.

Regretfully, I’m afraid to test deactivating or removing stuff because it’s a live site. There are 2 way we can proceed with this:

  1. Copy your WordPress setup to a different server. This way, we will know if there’s something in your server that is causing this.

  2. Setup a fresh install of WordPress in your server and only install Pro so we know if something in your WordPress setup is causing the issue.

Either way, we will need to test this in a non-destructive way and that is only possible in a staging site.

Thanks.

I could create another instance of wordpress and try that route.

Hi,

Please let us know how it goes.

Thanks

Installed new instance of Wordpress. The problem does not exist on the new instance.

Ok so this says, yes there is something on my site or within my wordpress installation causing the issue. After deactivating all of the plugins and removing the entire .htaccess and still having the issue what would be the next steps?

Hi,

Please create a staging(exact copy of your site) in a different url or in a sub directory.
eg. https://www.markkosinski.com/staging

You can use this third party plugin in creating it.

This will allow you and us to debug without disrupting your live site.

Don’t forget to provide us the login of your staging site in Secure Note.

Thanks

I can understand the idea of creating a staging copy of the website, but unfortunately, siteground does not provide unlimited space. I started to create the file to make a new instance, got an “out of space” warning from siteground so I stopped and deleted the file. I have backups of the site (files and database). If it gets trashed I can restore it from a backup quicker then creating a whole new instance of the site in a subdirectory. So at this point I would say go ahead and do whatever you feel you need to do with the site to figure out what is causing the problem.

I just noticed this:

.cs-launchpad {
max-width: 500px;
border-width: 1px;
border-width: var(–d-border);
border-style: solid;
border-color: #e2e2e2;
border-color: var(–c-border);
background-color: #fff;
background-color: var(–c-bg);
box-shadow: 0 0.35em 1.5em rgba(0,0,0,0.075);
box-shadow: var(–s-launchpad);

If i disable background-color: var(–c-bg); and allow background-color: #fff; to be used the problem goes away in the menu (hamburger which in my case is a right arrow) It also exists in the custom css and js items.

Hi @mkosinski,

Not on my end, still the same even by forcing the background color to white. I tried some and has no effect either. Before we continue, would it be okay to disable your site’s optimization? It could be the reason and there are multiple optimizations including the removal of query strings. I like to test it clean without optimization first.

Thanks!

Sure go ahead. Whatever you feel you need to do.

Probably the easiest would be to rename the .htaccess file and then disable all the plugins.

Hello @mkosinski,

We have disabled a few optimizer plugin and it seems that it slowly displays the editor back. It is now showing this:

It could simply mean that one of your plugin is causing the issue in your server. I would also recommend that you contact your hosting and maybe ask them if there are any services or files that we restricted in the server which might also be the case here.

Please let us know how it goes.

Awesome, when I get home I’ll check it. Thanks for looking at it.

You’re welcome, let us know how it goes.

Have a nice weekend.

Took a look at the property editor after I returned home. It’s still doing the same thing. If I click on what should be the hamburger (in my case a right pointing arrow) the menu that slides out is still transparent with the underlying text showing through. If I click css or js I get the same thing. Last night I removed the css variables and let it use the hard defined values in the css instead and it works. The only problem with that is when you guys update Pro it will over write what I’ve done (changes are in the app.css file). I did install a fresh copy of WordPress and the issue doesn’t exist. I also disabled all the plugins, removed my .htaccess file in my live site but the problem still remains. I tried chrome (cleared cache each time), Firefox (cleared cache), edge, internet explorer, opera… All give the same result. Obviously something in the live site is not allowing some of the css variables to work. Some of them do seem to work. If you look at the site now you’ll see that I have the hamburger menu, css and js not showing transparent. If you restore the app.css to the original as installed the problem will be there.

Hi @mkosinski,

Have you tried disabling all optimization before testing it? I checked and they are still active. And your freshly installed Wordpress probably doesn’t have that optimization too. You also mentioned SiteGround, its hosting has internal caching, please check if you can disable that too then test it again. Having multiple optimizations when there is already active one is overkill, it causes more issues than good.

And you shouldn’t customize the app.css, it’s a core file and it will always be overwritten by an update. It’s true in any plugin, try changing a core file in SEO Yoast and update it, it will be overwritten too. The best workaround for that is copy your edited CSS to your custom CSS section like child theme’s style.css

Thanks!