Hi!
thanks for the reply. I don’t think is so complicated, only i don’t understand why i can’t override the opacity of the element with the one write in css inside my keyframes animation.

.image-overlay {
overflow: hidden;
}

.image-overlay .image-overlay-inside::before {
font-size: 30px;
}

@-webkit-keyframes avia_pop_small {
  0%   { -webkit-transform: scale(6); opacity:(0);}
  100% { -webkit-transform: scale(1);opacity:(1); }
}
@-moz-keyframes avia_pop_small {
  0%   { -moz-transform: scale(6);opacity:(0);}
  100% { -moz-transform: scale(1); opacity:(1);}
}
@-o-keyframes avia_pop_small {
  0%   { -o-transform: scale(6); opacity:(0);}
  100% { -o-transform: scale(1); opacity:(1);}
}
@keyframes avia_pop_small {
  0%   { transform: scale(6); opacity:(0);}
  100% { transform: scale(1); opacity:(1);}
}

a:hover .image-overlay .image-overlay-inside {
-webkit-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
-moz-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
-o-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
}

Here was the response I received from my hosting support person :

its not a hosting issue its to do with how safari is ignoring the !important in the css rules probably
this rule affects the of the menu text
color: rgb(187, 187, 187) !important;

But theres nothing server side that affects how different css browser rules are rendered in different browsers.

It’s not an !important rule issue because i cleared all the custom css and the issue still persisted. This is one crazy situation. It really sucks because this is the best theme ever and I might have to start over with a new theme.

So it sounds like I’m stuck. I guess the last thing to try would be to test another font maybe. I’m out of ideas. I will update (in case soeone else has this issue.)

Thanks!!

Hey Devin,

Thanks for the reply. I am currently using respond.js to add responsiveness to the site in IE8, which worked perfectly with the past versions of Enfold, but is now causing the breaking seen in the screenshot.

1. I tried this both with and without respond.js active, but unfortunately it did not fix the issue, the menu remained the same.

3. I tried this and unfortunately the problem remains. I’ve also seen several other people on the forum with the same issue in IE8 where the font renders as rectangles. Since this is the only instance on the site where I’m using the Entypo font, could you show me how to simply switch the magnifying glass icon out with an image of my choosing (so I can upload an image of a magnifying glass) or another work around?

4. This worked, thanks!

5. I do have respond.js installed, which may explain that. Unfortunately I tried the code you supplied both with and without respond.js enabled and cleared cache, but it doesn’t work either way.

6. I’ve now discovered an issue that has reared its ugly head again where the menu is overlaying the logo at certain sizes in every browser:
http://s13.postimg.org/huh20ejhj/Screen_Shot_2013_09_20_at_8_43_41_AM.png

Thanks,
Tom

I did try with larger image, still not working. But why you are ignoring the fonts and arrow icon mentioned above. What does they have to do with my image size? Lets forget the image and resolve that part. Image will be fixed automatically.