Bug 235471 – :active selector doesn’t display

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Reece A]

I have recently updated to iPadOS 15 and went to my website…
When you click on a link it should change colour but since I have updated it will not. I have a 2020 iPad Pro on iPadOS15.

I used the :active selector 

a:active {
   color: brown;
}

[Alexey Proskuryakov]

Could you please provide a link to your website, or a self contained test case? The active selector works in WebKit in general, e.g. I see it working here in Bugzilla.

Are you tapping, or using a Magic Keyboard trackpad? As tapping and holding immediately starts a transition to preview, avoiding :active seems like correct behavior in that case (and matches whet I observe).

[Reece A]

I am using the Magic Keyboard Trackpad. Here is the sandbox:
https://codepen.io/reeceatkinson/pen/PoOYdom

[Alexey Proskuryakov]

Thank you! I can reproduce on a Mac too - works as expected in Chrome, but not in Safari.

In the codepen test, the purple color comes from "focus", not from "active". That's longstanding expected behavior, please see bug 22261 for discussion.

.sidebar li a:focus {
  background: #ccccf0;
}

The original report here is about :active though. Do you have a test with that? Also, did that work before iPadOS 15? If something changed, that would be an indication that we could be looking at something other than bug 22261.

[Reece A]

So how would I make the background turn purple when it has been clicked?

[Alexey Proskuryakov]

The bit of code that you posted originally is the right way to achieve such behavior. If it doesn't work, please provide a complete test case - the one that you provided on codepen is different.

[Reece A]

I would however it is the exact same code from my production environment.

[Alexey Proskuryakov]

I see. Please switch to a:active, a:focus will not work for this purpose.

*** This bug has been marked as a duplicate of bug 22261 ***