UXP buttons don't execute JS with CSS for background-image: linear-gradient

Photoshop
1

This is a really weird bug that just showed up in today’s release of Ps Beta: Adobe Photoshop Version: 27.5.0 20260223.m.3430 982ab4c x64 (beta, Prerelease). I’m on Windows 11.

It’s a UXP bug whereby buttons with inline CSS for “background-image: linear-gradient” stop working when the “active” state for the button code adds a background-color. Here’s how to reproduce it.

HTML:

    <span id="noBackgroundImage" class="default" style="height: 30px; width: 30px; border: 2px solid white;"></span>

    <span id="withBackgroundImage" class="default" style="height: 30px; width: 30px; border: 2px solid white; background-image: linear-gradient(0deg, rgba(0,0,0,.5), rgba(255,255,255,.5));"></span>

   </div>

CSS via the style sheet:

span.default:active {

     background-color: rgba(0,0,0,.3);

}

JavaScript:

document.getElementById(“noBackgroundImage”).addEventListener(“click”, () => {

console.log ("clicked button WITHOUT background image")  //Console logs out:  "clicked button WITHOUT background image"

});

document.getElementById(“withBackgroundImage”).addEventListener(“click”, () => {

console.log ("clicked button WITH background image")  //Console logs out nothing

});

With this code in place, when the button with id=“withBackgroundImage” is clicked, nothing happens. The JS does NOT execute.

Interestingly, when the CSS for background-color is included as inline style and the “default” class calling the style sheet CCS “active” state is removed, the JS for both buttons works. Code that works is shown below:

<div style="display: flex; justify-content: space-around">    

<span id="noBackgroundImage" class="" style="height: 30px; width: 30px; border: 2px solid white; background-color: rgba(0,0,0,.3);"></span>

    <span id="withBackgroundImage" class="" style="height: 30px; width: 30px; border: 2px solid white; background-image: linear-gradient(0deg, rgba(0,0,0,.5), rgba(255,255,255,.5)); background-color: rgba(0,0,0,.3);"></span>   

</div>

So, it’s just when the style sheet calls the “active” state background-color CSS that the button with the inline background-color: linear-gradient inline style fails to execute its JS.

There were no problems in the previous version of Ps Beta and there is no similar problem in the general release of Ps. This is definitely an obscure bug, but something has definitely changed, and it has the potential to affect any UXP plugins that uses the styling combinations.

NOTE: I reset my preferences, but doing so did NOT fix this problem.

2

Thanks for the report.

@samgannaway is looking into it…

3

I traced this problem to a feature in the pre-release version of Ps Beta and have reported it to Adobe on the appropriate forum.

1 Like
4

Could you link to that post here, even if the content not visible to everyone? (Because it’s in a prerelease forum, for example…)

5

I discussed the probable cause of this problem in a couple of posts on the pre-release forum:

1 Like
6

I am also seeing some formatting changes that knock things out of whack with that feature enabled.

1 Like