Estoy viendo este comportamiento para Chrome en una Mac (todavía no lo he probado en Windows). Además, dado que este trabajo es para una extensión de Chrome, estoy de acuerdo con obtener una solución que sea relevante solo para Chrome (por el momento no es necesario que funcione con varios navegadores).

Problema: el navegador parece estar dibujando el "contorno" de manera diferente en función de si el estilo del esquema es "automático" o no.

Al dibujar un contorno alrededor de una etiqueta que es el padre de un "img", para algo como esto:

 <a href="image.com">
   <img class="profile_photo_img" src="imageSrc.jpeg" width="50" alt="Steve Jobs" height="50">
 </a>

Si el estilo de esquema es "automático", el esquema se dibuja correctamente. es decir, Chrome tiene en cuenta las dimensiones de la imagen interna para representar un contorno alrededor de la etiqueta. (Ver el contorno verde en la captura de pantalla).

Si el estilo de contorno es "sólido" o cualquier otro estilo regular, el contorno se dibuja solo alrededor de la etiqueta externa sin tener en cuenta las dimensiones del elemento secundario interno.

El CSS que estoy aplicando se ve así:

.class-name:focus {
   outline: 4px auto #068065 !important;
   outline-offset: 2px !important;
 }

1) ¿Hay una manera de solucionar esto o solucionar esto, es decir, hacer que el navegador dibuje el contorno correctamente también para el estilo de contorno "sólido"?

2) ¿Dónde debería leer para leer más sobre esto? ¿Tal vez alguna documentación informal o acceso al código relevante?