DIV que cambia de tamaño

Bueno quería pedirles ayuda con un diseño que estoy haciendo, es 100% responsive, con eso no tengo problema, pero incluyo unos circulos para identificación, y al hacer hover se muestra la información de la persona que aparece en el circulo, de hecho es un invento mio, o al menos no lo he visto impleementado en otro lado, y está hecho desde 0, probado y todo, el problema es que el circulo (div.circulo) hace aparecer a lo que llame circulito (div.circulito), el cuál es rectangular y trae adentro un article, en donde muestro la info, por ahí hice un truquillo que hace poco aprendí para ocultar la barra de scroll, y como pueden verificar se puede hacer scroll dentro del artilce sin ver la barra, lo malo es que al hacer zomm en la pagina para alejar y simular resoluciones más grandes, pareciera que este article reduce su tamaño, y ahora se ve la barra de scroll. Ayuda con esto, se que alguién tiene la solcuión, porque ya lo intenté todo y nada funciona

Les dejo el link de la página con este problema
Click aqui

Gracias y saludos

P.D.
La implementación CSS la dejo a continuación:

Código CSS :

   div.circulo > article{
      overflow: hidden;
      height: inherit;
      width: inherit;
      border-radius: 50%;
   }
   div.circulo article img{
      height: 100%;
      width: 100%;
   }
   div.circulo{
      position: relative;
      height: 80px;
      width: 80px;
      border: #e9e9e9 5px solid;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      z-index: 49;
      opacity: 0.9;
      -webkit-transition: height 0.5s, width 0.5s, margin 0.5s;
      -o-transition: height 0.5s, width 0.5s, margin 0.5s;
      transition: height 0.5s, width 0.5s, margin 0.5s;
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
   }
   .circulito{
      min-height: 200px !important;
      min-width: 250px !important;
      max-height: 200px !important;
      max-width: 250px !important;
      display: inline-block;
      border-radius: 10px;
      border: #e9e9e9 5px solid;
      position: absolute;
      top: -100px;
      right: -260px;
      background-color: #252525;
      text-align: justify;
      opacity: 0;
      overflow: hidden;
        visibility: hidden;
      -webkit-transition: opacity 0.5s, visibility 0.5s;
      -o-transition: opacity 0.5s, visibility 0.5s;
      transition: opacity 0.5s, visibility 0.5s;
      -webkit-transition-delay: 0.5s;
      -o-transition-delay: 0.5s;
      transition-delay: 0.5s;
   }
   .circulito article{
      min-width: 248px !important;
        max-width: 248px !important;
      max-height: 180px !important;
        min-height: 180px !important;
      font-size: 10pt;
      padding: 10px;
      overflow-y: scroll;
      overflow-x: hidden;
   }
   div.circulo:hover{
      height: 120px;
      width: 120px;
      z-index: 51 !important;
      opacity: 1;
      margin-left: -20px;
      margin-top: -20px;
   }
   div.circulo:hover > .circulito{
      opacity: 1;
        visibility: visible;
   }

Si no he entendido mal, lo que te pasa es que con el codigo que has hecho para que la imagen se haga grande al pasar el raton por encima hace que la web al hacerla pequeña salga la barra de scroll inferior verdad?
Pues bueno..., en vez de usar lo que has hecho para hacer la imagen mas grande intenta usando esto
http://cerberupo.com/ayuda_transform_scale.html
Si no te funciona, siempre puedes quitar la barra de scroll de abajo y tirando millas
Que si no recuerdo mal es con overflow-x: hidden; en el body.
Espero que te sirva de ayuda, suerte.

A ver...

Código CSS :

.circulito article {
  max-height: 180px !important;
  font-size: 10pt;
  padding-right: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 10px -10px 0px 10px;
}