Image highlighted with borderline

Technical Q&A
, ,

Topic summary

A developer is experiencing an issue where images display an unwanted highlight/border when users exit a zoom view by pressing ESC on their e-commerce site.

Problem Details:

  • The highlight appears specifically when returning from the zoom page via ESC key
  • Previous attempts to fix by editing app.js removed the highlight but broke scroll functionality
  • A working example URL was provided for reference

Proposed Solution:
The issue stems from a box-shadow effect rather than an actual border. The suggested fix involves adding CSS to remove the box-shadow on the focus-visible state:

button.product__media-toggle:focus-visible:after {
  box-shadow: none;
}

The discussion appears to have reached a potential resolution, pending implementation and testing of the CSS solution.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have this frustrating problem on the website I am working on. When coming back from ZOOM page by pressing ESC button - the image becomes highlighted with borderline.

Maybe someone had this problem and knows how to solve it? I have tried editing app.js, successfully removed the highlight but then I was unable to scroll after pressing ESC.

Here’s the website 9999-1 – AMULETHA

I can’t give access to this store tho. Thank you!

2

It’s not a border, but box-shadow.
Try this:

button.product__media-toggle:focus-visible:after {
  box-shadow: none;
}