Hi. I have noticed that all of my anchor tags flash when tapped. This is especially noticeable when there is a list which has anchors, they are highlighted when you scroll through the list.
Is there a way to disable it?
You can see an example here:
If it could behave just like a ui-sref navigation (basically no visual feedback) that would be perfect.
Its the tap hightlight color you’re seeing. Try this to disable it:
-webkit-tap-highlight-color: rgba(0,0,0,0);
Hi. thanks for the response. I thought the same thing before posting here. it does not seem to work. I updated my codepen with this
Is anyone else seeing this? Are anchors supposed to flash when you tap them? Maybe this is a browser feature we can’t get around?
I think this is actually coming from Ionic itself. When items like that are tapped ionic applies an activated class to them (as well as the built in html states). It is this state that applies a background colour to the items.
See here: https://github.com/driftyco/ionic/blob/master/release/css/ionic.css#L4384 (.item.activated)
This is for visual feedback, so users know when they have actually tapped an item.
But if you want to disable it, you can target it with css.
Just target the activated class
Thank you both! I agree about the visual feedback however when you have a list of items and you start a scroll you see the flash as if it were tapped/activated. It seems like there is a slight delay between a swipe/drag gesture and it considers it a tap so you see the item flash as if it were selected. Hope this makes sense.
So there is a lot going on when you start scrolling and tapping around an app.
So theres some work going on when you scroll to make sure that no accidental clicks/taps on items.
Its not 100% perfect, but we also have to consider many devices.
So we aimed for a middle of the road solution that works across all the devices.
As I said, it may not be perfect, but from out tests, it worked the best across multiple devices/os/os versions.
Thanks Mike. I see this highlight on devices from an old Android to a new iPhone 6. Even if I get a running start on a scroll (scroll immediately upon touching) it does it. Also, I use a dark background so this makes it even more apparent. When I get some time I will modify my Code Pen. I am not looking for any changes to be made, helping me with the CSS classes so I could one off them myself is enough. Thanks again!
Tim
If you want to just get rid of that, then do this
.activated{
background: #fff;
}
That would be really apprecitaed
My opinion is this should be a priority. The highlight on scroll is bad UI. Seems to happen on Android devices (probably more than half of devices used).
Is this been changed in ionic2? It doesn’t work with .activated class.