Hi there,
While mobile testing out a demo website I’ve created I noticed that when you tap on either an image or one of the arrow buttons in the Gallery section (and other areas of the site), a blue highlight appears on the background of the area. Is there a way to disable this, at least for the lightbox gallery buttons?
Please see the following page for a demo (view on mobile - desktop does not appear to be affected).
Let me know if any other details would be helpful.
Thanks!
The blue highlight will be the default outline styles for elements that are focussed and are present in desktop as seen in the screenshot below. If you remove the highlight then keyboard users will be unable to tab through your page or use it at all.
I suggest that you set an outline style on focus that fits in with your colour scheme but I would not remove them as they are the greatest accessibility aid that you can have without doing any extra work. 
Thanks Paul! Ah, I was actually referring to the blue highlight when an item is focused (I think it may only appear on mobile?). I couldn’t find any way of targeting this, however, in my initial searches - only the “user-select” property.
I guess a similar example is if you inspect an item using the Dev Tools and the blue overlay appears. My only thought is that it’s a bit off-putting when you tap on the left or right arrows when a gallery item goes full-screen as it “blinks” the selection of the parent element. Not something I’ve come across before.
Can you supply a screenshot as I still think you are talking about focus states? They appear on desktop if you tab through the page.
I don’t see a problem in iOS safari but may be looking at the wrong thing and default focus styles vary between browser/platform.
Of course - actually, even better is a screen capture from my phone
This is running in Chrome on Android but I don’t think it would be device specific (possibly browser specific though?)
https://drive.google.com/file/d/15RW2ivRpSFJtPq_stXFqe5YQVpezQvDP/view?usp=sharing
It could just be a characteristic of the browser and it’s unavoidable but just wondered if there was a way to at least reduce visibility of the blink by changing the colour or something.
Hey,
I had a look I don’t think that is a browser thing. Looks to me like something to do with the lightbox thing. Have you had a look at dev tools on a mobile device to see if this is the case?
The only real difference in mobile browsers around likes that I am aware of is the one on iOS: https://css-tricks.com/annoying-mobile-double-tap-link-issue/
But this is not that issue. I can confirm I see the blue flash when I tested on Chrome on Android. So if I was you I would hook my phone up to computer and crack open dev tools and see.
Cheers.
I don’t see any flash on IOS safari (iPhone 5s & 7) so it looks browser / platform specific to me.
Unfortunately I don’t have an android device to test on so it will be hard for me to debug.
Actually if I use the device toolbar in Chrome desktop it shows the highlight for ios (even though it shouldn’t as it doesn’t appear on the real device) and it looks like its some type of tap-highlight color.
I tried the fix below and it seemed to work in the inspector so might be worth a try.
*,
.zoom-gallery,
.zoom-gallery * {
-webkit-tap-highlight-color: transparent;
}
Also on the device toolbar it seems that if you disable cursor:pointer then the highlight goes away.
If the first fix doesn’t work then it may be worth adding the following code to your page and see if it has any effect and it may bring you closer to a real solution.
@media (any-hover: none) {
*{cursor:none!important}
}
It may do nothing as I am only testing on the device toolbar in chrome.
Hey Paul (and mrlagmer), thanks for the tips!
I eventually plugged my Android phone in and found that indeed, it was the highlight color default on Chrome that was showing up. I disabled the cursor pointer and that immediately got rid of the issue, so I took Paul’s advice but instead targeted all elements and disabled the webkit highlight color like so:
*{
-webkit-tap-highlight-color: transparent;
}Not ideal from an accessibility point of view I imagine so I guess I should just target elements within the body when the gallery pop-up is applied? It has also got rid of the annoying flash when you close the mobile menu, however, so I’m tempted to keep it as-is…
Thoughts?
I’m always wary of removing things that are meant to aid the user but as it’s a non standard property I don’t think it will hurt too much to remove it and I couldn’t see it on my device anyway. Indeed the flash that you see may be more of a health issue to users with visual disturbance problems.
The above assumes that you have correct focus styles anyway so the tap highlight should mostly be redundant.
Thanks for the feedback Paul! Yes I rarely if at all touch the focus states - aware that browser defaults are best left alone in that case
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.