0

I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).

enter image description here

here's the gif to illustrate the behavior. enter image description here

I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one

enter image description here

also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well

::selection {
  background: transparent;
}

::-webkit-selection {
  background: transparent;
}

::-moz-selection {
  background: transparent;
}

Any ideas about possible origin of this?

godblessstrawberry
  • 3,611
  • 31
  • 45
  • Please see [this question](https://stackoverflow.com/questions/11885161/remove-grey-background-on-link-clicked-in-ios-safari-chrome-firefox) which already has the answer that you're looking for. First link on google when typing 'apple grey background touch tap'. – Jake Jan 17 '20 at 10:21
  • @Jake thanks mate, I've searched here but didnt got anything even similar – godblessstrawberry Jan 17 '20 at 10:26
  • So you've tried modifying `-webkit-tap-highlight-color` color value and nothing changed ? See : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color – Jake Jan 17 '20 at 10:28
  • I just tried this - this prop fixes behavior for the regular tap, but not for the force – godblessstrawberry Jan 17 '20 at 10:28
  • You would have to ask an Apple CSS specialist for that one since it's not documented and specific to their systems, I'm not even sure you can modify this. – Jake Jan 17 '20 at 10:32

1 Answers1

0

Okay so I found sort of "solution" based on parent's color.

Try to set *{background: red}. If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc. In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.

Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:

enter image description here

I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:

WebKit DOM Programming Topics

So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.

godblessstrawberry
  • 3,611
  • 31
  • 45