CSS overflow-x: visible; y overflow-y: hidden; causando problema con la barra de desplazamiento

Supongamos que tiene algún estilo y el marcado:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Cuando vea esto. El <ul> tiene una barra de desplazamiento en la parte inferior a pesar de que he especificado valores visibles y ocultos para el desbordamiento x / y.

(observado en Chrome 11 y opera (?))

Supongo que debe haber alguna especificación del w3c o algo que diga que esto suceda, pero por mi vida no puedo entender por qué.

JSFiddle

ACTUALIZACIÓN:- he encontrado una manera de lograr el mismo resultado mediante la adición de otro elemento envuelto alrededor de la ul. Compruébalo.