"Slider Revolution" Plugin Causing Conflict With CSS Delivery in Google Chrome

Support
#1

Hello,

The website in question is https://nnnpropertiesgroup.com.

I am experiencing a conflict with the Slider Revolution plugin and the delivery of CSS elements related to my site. This conflict is only occurring in Google Chrome – I have experienced no issues in Firefox or Safari. When the Slider Revolution plugin is implemented, it is preventing the deployment of various CSS elements on my site, specifically on the following pages:

https://nnnpropertiesgroup.com
https://nnnpropertiesgroup.com/about/

As you can see, certain images are not loading properly when the Sliver Revolution plugin is activated. Please reference the attached screenshots to see what I’m talking about.

Any ideas on how to resolve this matter? Thanks.

Best,

Mike

#2

Hi Mike,

I checked your website and actually, there is no error in the console regarding the case you have mentioned. But I see 2 error which might cause the issue:

1- The Error Below:

Failed to load resource: net::ERR_FILE_NOT_FOUND blob:https://nnnpropertiesgroup.com/7f73bc4b-019b-40f4-94bb-e041bbc69979

It seems that you are using a performance tool of some kind that changes the images to Blob. Try to disable any measure you use to avoid turning normal linking to the images changed to Blob.

2- The Error Below:

[DOM] Found 2 elements with non-unique id #gform_14:

The error above seems to be related to the Gravity Forms and the fact that there are repeated HTML IDs which are not unique.

I suggest that you follow the steps below for troubleshooting:

  1. Make sure that the version of the Revolution Slider that you use is exactly what we have in the Version Compatibility list.
  2. Please follow this troubleshooting steps for Revolution Slider.
  3. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see 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.
  4. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  5. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

#3

Hello,

Unfortunately, I had trouble following what you wrote, other than the fact I can confirm I use a CDN called CloudFlare. I purged the cache and am still experiencing the problem. Again, the problem is only in Chrome. When I deactivate the Slider Revolution plugin, the problem in Chrome disappears. Unfortunately, I need Sliver Revolution for my site’s full functionality to work.

Could you please troubleshoot this further for me? I have provided my username and password in a secure note above.

Thank you.

#4

Hi gignnn,

Before we delve into details of your website we need you to do 2 things:

  1. Please follow the steps mentioned here to make sure you have the correct way to use the CloudFlare.
  2. Please make sure that you have a complete backup of your website as in the process we will disable some plugins to check and other troubleshooting stuff which might cause your website to go offline. You can ask your hosting service provider to do that for you.

The best approach will be that you add a staging website which with the help of your hosting service provider it can happen.

Thank you.

#5

Thanks for your reply. I followed the steps you provided and successfully updated my Cloudflare settings as well as backed up my site. You may proceed with your testing, and I appreciate your help!

#6

Hi gignnn,

I checked your website and especially the About page. The problem with that page is that it is changed outside of the Cornerstone and it has a mix of old content-band and new sections features which made a mess here.

The presence of the background, while the slider is off, is merely the side effect of the actual problem which is the incoherent code.

To show you that the problem is not the Revolution Slider I added a new Test Page and added the same Revolution Slider and another section with background and it worked with no problem.

Please recreate the problematic pages with the Cornerstone and you will have no problem.

Thank you.

#7

Hello,

I don’t know how to use Cornerstone. I have always just used the shortcode within the text view when designing various pages on my Wordpress site. Could you please help me isolate specifically which shortcode is causing the errors, and what I should update it to?

#8

Also, why does it work perfectly in all browsers and across all iOS devices, with the exception of Google Chrome on my computer?

I really don’t care about the quality of the code as long as the site loads. Any advice on how to fix using shortcode rather than Cornerstone would be greatly appreciated.

#9

Hi Mike,

It looks like there is a malformed shortcode in your page. I tried creating a new page with revslider and just one section and it is working just fine. Each browser renders code differently so it may work to others and not in chrome.

To be able to check what is causing the issue. Try to create a new page and add content to it bits by bits from your about page while checking the preview each time.

Thanks

#10

Hello Paul,

With all due respect, I am not that technical and have paid you guys a lot of money — I have multiple X licenses. I appreciate that you guys are busy, and thus far your service has been excellent, but I simply lack the technical expertise to figure this issue out. I just tried doing what you said and the problem remains.

A ton of people use Chrome as their default browser. Thus, I really need some help figuring this issue out.

#11

Hi @gignnn,

I do understand your situation here and that you are not a technical person, but unfortunately the solutions to the problem that you are experiencing are indeed technical and we can not go over every page that you added with none standard way and see why the problem is happening in the Chrome or any other browser/

I did my best and did a complete analysis of the about page and found out that the section with the HTML ID of x-section-9 uses none standard code for the Parallax effect and that is causing the issue. So you need to go to X > Theme Options > CSS and add the code below:

#x-section-9 {
    position: relative;
    z-index: 9999;
}

The code above forces the section to go over the top and show the background image.

I am not sure if that is the case for the other pages but indeed it will be impossible for us to go over all your pages and find what you did right or wrong.

I strongly urge you that you read the articles in the Cornerstone / Content Builder section of our Knowledgebase by clicking here. Also, you need to educate yourself on using the elements by checking the Elements section articles in the same link.

We can not guarantee the correct work of the theme unless you use the recommended way of page creation and Page Builder usage.

Hope I have honestly explained the situation. Thank you for your understanding.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.