Circle Affect Disappears When Pressed on iPad

Yes, I’ve noticed this and yes it bugs me too!. It’s on my list of things to fix (though I’m trying to concentrate on content for the next few days, not design of the site).

The slider’s fade is not the issue. This has been there as long as I’ve been using Customizr (i.e. at least 2.1.8 onwards).

I think that it’s a bug in the underlying rendering software of the iPad/iPod/iPhone. I’ve tested Atomic Browser and Safari on my iPads and iPod Touches. Sometimes you see the full circle, sometimes the full square-ish image, and yet other times a half-hearted border showing the tip of the corners of the square and the circle with border.

It’s inconsistent, messy and looks bad. But I don’t think it’s the Customizr code that’s causing it.

At some point, I think I’ll switch off the zooming on hover on small devices, as hover is meaningless on touch screens anyway, so it only half kicks off on click.

I like the idea of diss baling the zoom on hover feature. You wouldn’t happen to know where that code is located off the top of your head? Looks like I have another date with firebug. Would it be mobile specific code or merely pointing to the width of the page? Thanks

The CSS to switch it on is:

.widget-front.hover .round-div,
article.hover .round-div {
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}

What I’d like to do is switch it off at the larger scale (simply because I’ve made my images “complete” when zoomed).

While you’re there, if you can also stop the menu flickering in Safari (OSX) as you pass over the hover threshold, you get a gold star ??

Oh, and to make it mobile-only or tablet-only, you just encase it in the @media... queries of your choice.

Yah that menu flickering has been driving me crazy as well. Thus far my “professional solution for that has been to squint my eyes and pretend it doesn’t happen. And thanks for the continued support.

Ah, I use that “professional” solution a lot ?? Thanks for the thanks!

Ok, I input the following code into the custom style.css:

@media (max-width: 1024px) {
.widget-front.hover .round-div,
article.hover .round-div {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
}

The 1024px, refers to basically any iPad/iPhone out there; however, I can’t speak to android etc. The frustrating thing is that it also shuts down the circle zoom for websites on desktops and laptops once the window is resized below the 1024px point, and on top of that the circle(s) still disappears on average about one out of every three “clicks”.