Docs

[blazeys]

Hello.

I added a shadow effect for my grid but the problem is that it doesnt show any effect in chrome while there is no problem for firefox. No shadow can be seen even in the preview of Editor / Preview of Ess. grid for chrome.

Thanks.

[blazeys]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates. If you are using CloudFlare or may have installed a caching plugin like WordFence or WP Super Cache? Please keep in mind that after doing every updates and changes, always remember to clear all caches first when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And then please also clear your Chrome browser’s cache or even use Chrome’s Incognito mode to test you site.

Please let us know how it goes.

[blazeys]

Hello,

I deleted the cache of WP and cleared on chrome too and also tried on 2 different computers which entered the site the first. It is clear that there is a problem with chrome which the shadow effect can not be seen. You can check the above link also and see the difference in firefox and chrome. Also there is shadow effect in IE but this time hover effect of navbar is being different than it should be.

Thanks.

[Christopher]

Hi there,

In regards with box shadow, please provide us with login credentials so we can take a closer look.

CSS Transitions are not supported in IE9 or lower. They are supported in IE10 and 11.

Hope it helps.

[blazeys]

This reply has been marked as private.

[Lely]

Hello There,

Upon checking, this is a bug in Chrome bug #105725. The base64-string has to be padded.

webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) !important; */

That image is not working. Please add this CSS instead on Settings Tab > Custom CSS:

.esg-grid .mainul li.eg-jefferson-wrapper {
    -webkit-mask-image: initial !important;
}

Hope this helps.

[blazeys]

Thanks for the reply and help but it didnt work.

Also tried the code in Global CSS but no result too.

Can there be a conflict with the code that you have give and

“.esg-overflowtrick { overflow:visible
}”

which is used in child’s css?

And which image is not working specificly? Changing it can fix the issue ?

Thanks

[Rad]

Hi there,

It’s due to this,

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) !important;

Please remove that. It’s working on firefox since it’s not active on firefox due to -webkit prefix. Firefox uses -moz as prefix.

Thanks!

[blazeys]

I see but can you help me to locate it please.. I am not able to find the prefix?

[blazeys]

cant find it from CSS editor of the skin.. there is no base64.. is it located somewhere else

[blazeys]

Ok sorry found and deleted the prefix and added

.esg-grid .mainul li.eg-jefferson-wrapper {
    -webkit-mask-image: initial !important;
}

instead to CS’s css but nothing still..

[Rue Nel]

Hello There,

To totally remove it from the css, you have to edit the essential grid skin and remove the shadow from there. Or you can change the shadow from there as well.

Hope this helps.

[blazeys]

Thanks for the reply.

So the solution is to remove the shadow effect but there is no way to fix it for chorome?

I can still keep then at least it will for firefox.

Thanks.

[Rad]

Hi there,

It should be working on chrome the same as on firefox, and again, it’s not working on chrome because of this

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) !important;

It still there.

Here is the complete CSS located at

.esg-grid .mainul li.eg-jefferson-wrapper {
    background-color: #ffffff;
    padding: 0px 0px 0px 0px;
    border-width: 0px 0px 0px 0px;
    border-radius: 5px 5px 5px 5px;
    border-color: #000000;
    border-style: solid;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) !important;
    box-shadow: 5px 5px 2px 2px rgba(0,0,0,0.40);
    -moz-box-shadow: 5px 5px 2px 2px rgba(0,0,0,0.40);
    -webkit-box-shadow: 5px 5px 2px 2px rgba(0,0,0,0.40);
}

That CSS is auto generated if your Overflow setting is set to true. I turned it off at Your Skin > Layout Composition > Spaces > Full item > Overflow Hidden. Should be working now on chrome. You’re using custom shadow that isn’t something from the skin, and it’s affected by overflow setting.

Thanks!

[Author]

Posts