webkit-transition, anomaly when using width:auto

Question

I have a sidebar navigation in standard <ul><li><a></a></li></ul> pattern which truncates the full text of the links using overflow hidden. After hovering for 1s, I want the the anchor to expand in width, showing the full text of the link.

I have this functionality working completely in CSS, but I'm running into anomaly: I have the width of the anchor set to Auto on :hover. After the 1s delay is triggered, the width of anchor snaps to 0 and then expands out to its full width.

below is my css, and here you can see my current code in action: http://eventfeedstl.com/day/07182011/

.day .sidebar{
    width: 200px;   
    }
.day .sidebar ul {
    list-style: none;
    padding: 0;
    margin:0;
    position: absolute;
    width: auto;
    }
.day .sidebar ul li{
    border-bottom: 1px solid #626666;
    display: relative;
    width: 200px;
        }
.day .sidebar ul li:hover{
    width: auto;
        }
.day .sidebar ul li a{
    font-weight: normal;
    font-size: .8em;
    color: #f2f2f2;
    display: block;
    width: auto;
    padding: 4px 5px;
    background: none;
    width: 190px;
    height: 10px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    -webkit-transition: background 1.3s ease-out;
    -moz-transition: background 1.3s ease-out;
        transition: background-color 1.3s ease-out; 
        }

.day .sidebar ul li a:hover {
    background: #797979;
    -webkit-transition: background 0.15s;
    -moz-transition: background 0.15s;
        transition: background 0.15s;
        text-decoration: none;
    width: auto;
       -webkit-transition-property:width;
       -webkit-transition-delay:1s;
        position: relative;
    }       

Answer 1

You are overwriting your transitions between background and width, which is probably causing problems. There is a way to set multiple transitions but I'm fairly sure this way will cause problems.

But

In general transitioning to auto doesnt work yet. I like to use min-width and max-width in these cases to approximate the effect.

Answer 2

A solution for toggling between a specific width and auto: The only way to get width: auto; transitions to work reliably is to explicitly set the width of items using Javascript. I know this defeats the purpose of using CSS transitions, but here's how I got it to work:

$(".author").each(function() {
  $(this).width( $(this).width() );
});

and then in css

.author:hover { width: 200px; !important }

EDIT: Here's a pure CSS solution for toggling between 0 and auto: CSS transition not working for percentage height?