Remove image effect in mobile view

Hi, please look at my site www.coldplayzone.it in mobile view.

I would like to remove the effect on images, because when I scrool the page touching an image on my iPhone, the image disappears for 1 second and then it comes back. It's an annoying effect in mobile view.

Thanks for your help.

Hi,
I think you should use tips from: http://www.gavick.com/documentation/gen ... ox-effect/
inside: mobile.css file /template folder/

or even more deeper ...

Sorry but I can't solve this. Could you please help me with the exact code to put in mobile.css or override.css?
I tried the code in that page you suggested me but it doesn't work.

Sure,
to be sure in first you can check adding inside override.css - but remember this is global - so joomla will use it on both mobile and desktop view.
If you want to use my code only for selected screen size - use mobile.css
there find line 209 and 215 inside @media only screen... { ...} block, I hope that now you will understand.

p.s.
Read more about CSS3 @media.

I tried the code in that page you suggested me but it doesn't work.

Right now on desktop & tablet I didn't saw any effects only white transparent layer.

p.s.
Check my Wiki manual again ...I've added more info at the bottom.

Hi Pawel, I added your code in mobile.css in the exact point you suggest me but I didn't solve completely.
After adding this code I tried to see my site on iPhone... when I scroll down touching an article image now it doesn't disappear anymore but when I scroll up the image disappear again for 1 second. Could you please have a look and tell me what's wrong?

thanks

Ok, to be more sure.. we still talk about HomePage ?

Can you check on different browser not only included by default Safari.

p.s.
I will ask somebody who has iPhone to check this topic.

Yes, we are talking about the Homepage, if you scroll under the Grid module in the header there are 3 NSP moldules.
The article image of these 3 NSP modules disappear when I scroll touching these images.
I tried with Safari and with Chrome... and it's the same

Which iOS version do you use? I've just checked your website on iOS 7.1.1 and can't see this problem.

Yes I have iOS 7.1.1 version too and if I scroll the page (with the finger on NSP module's image) the image disappear for 1 second and then comes back.
It's not a cache problem because I emptied the cache. However it's not a big problem for me....

Could you disable CSS compression for second? it will be much easier to check CSS then. The only effect that I get is kind of opacity animation but that's all, maybe I just scroll to fast.

Are you talking about: Module settings > External files > Use default CSS ???
If so, it's set to OFF

No I mean Use CSS compression in template advanced settings because right now files are combined to one and it is really hard to check CSS.

Ok, done... I disabled CSS compression

Please try to add this code to override.css file :

Code: Select all

.nspArt .nspImageWrapper img {
-webkit-transition:none !important;
  -moz-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
}

Now it works! Thank you so much