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
  • 4,556
  • 2
  • 40
  • 58
  • 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

2 Answers2

1

Good job digging up. I had the same issue plus another one and here are my solutions. Post is old but someone could find it useful like me today.

First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links. So that's something to check, just in case.

Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it. If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.

So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)

So if your links parent element is named card, you can add to your CSS:

.card {
isolation: isolate;
z-index:1;
}

Now, Force Touch will use the parent background color as we want to.

willdante
  • 26
  • 2
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
  • 4,556
  • 2
  • 40
  • 58