Estou vendo esse comportamento do Chrome em um Mac (ainda não testei no Windows). Além disso, como esse trabalho é para uma extensão do Chrome, estou bem em obter uma solução que seja relevante apenas para o Chrome (por enquanto, não é necessário usar o navegador cruzado).

Problema: o navegador parece estar desenhando o "contorno" diferentemente em torno dos elementos, dependendo se o estilo de contorno é "automático" ou não.

Ao desenhar um contorno em torno de uma tag que é o pai de um "img", para algo como isto:

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

Se o estilo de contorno for "auto", o contorno será desenhado corretamente. Ou seja, o Chrome leva em consideração as dimensões da imagem interna para renderizar um contorno em torno da tag. (veja o contorno verde na imagem).

Se o estilo de contorno for "sólido" ou qualquer outro estilo regular, o contorno será desenhado apenas em torno da tag externa, desconsiderando as dimensões da criança interna.

O CSS que estou aplicando tem esta aparência:

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

1) Existe uma maneira de corrigir isso ou contornar isso, ou seja, o navegador desenha o contorno corretamente para o estilo de contorno "sólido" também?

2) Onde devo olhar para ler mais sobre isso? Talvez alguma documentação informal ou acesso ao código relevante?