[BUG] The :active pseudo-class no longer working properly in Ps 23.2.0

Photoshop
1

I have the “buttons” of my plugin set up as span elements with the following CSS:

span.default {
    border: 2px solid #000000;
    display: inline-flex;  
    justify-content: center;  
    align-items: center;
    overflow: hidden;
}

span.default:active {
    border: none;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    background-color: rgba(0,0,0,.2);
}

In previous versions of Photoshop, this styling made the span element act like a button. When clicked, the :active pseudo-class would remove the current 2px solid black border and then add a new 2px black border on the top and left side so that the span contents would be displaced to down and two the right (like a button). The active: pseudo-class would also darken the button slightly.

Now, the acitve: pseudo-class no longer engages the “border-top” and “border-left” styles when the button is clicked. These only engage when the mouse button is held down and moved OFF the button.

I’ve tried to attach a video that tries to show this. The button click will engage the “background-color: rgba(0,0,0,.2);” style of the :active pseudo-class, but the “border-top” and “border-left” styles only engage once the mouse cursor is moved off the button. In the video there is a delay on when the “border-top” and “border-left” styles appear after the cursor is moved off the button, but in actuality, it happens as fast as the button leaves the “span” element.

2

I thought it was a glitch. Same happened on my plugin. Have multiple buttons on it, but :active isn’t working only on one of them and only sometimes. All buttons have same styles. Win10

3

For me, it appears to be just these two styles that aren’t triggered when the mouse clicks down. They only trigger when the mouse leaves the element but is still pressed down.

    border: none;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;

So maybe there is a new problems with the “border” style.

4

For me also background won’t change. But as I mentioned, it’s random. Sometimes it works and sometimes doesn’t. Didn’t even bother figuring out

5

Sorry, which version of Photoshop? Current is 23.2.1. 22 would be from last year.

Also: Windows 10 or Windows 11?

6

Oops, my bad. Version 23.2.0 on both Mac (Intel) and Windows 10.

7

This issue is still present in 23.2.1 also. I just updated.

8

Ps Beta v23.3 - none of the sp-action-button now triggers :active if it has both background and border set. Although it works just fine if button style is default or there’s a background without a border.

9

Well, I found a workaround. I still think it’s a bug, though, since this workaround wasn’t previously necessary.

I had the :hover pseudo-class for my buttons inside my “@media” style:

@media (prefers-color-scheme: light), (prefers-color-scheme: lightest) {
    span.default:hover {
        border: 2px solid #000000;
    }
}

The :active pseudo-class style was OUTSIDE the “@media” wrapper.

Once I put the :active and :hover pseudo-classes either both inside or both outside the “@media” wrapper, the :active pseudo-class style worked again.

Curious if you might have a similar arrangement @Karmalakas?

10

Nice… If I remember, I’ll check it during weekend. Or some time later when I get back to my plugin :confused: Have my hands full now at work, so not much time for a plugin :frowning: