``overflow-x：hidden''内部的元素仍然具有宽度（Safari）

Question

The following code demonstrates an element, p , that collapses and expands horizontally with CSS3 (actually webkit) transitions:

<style>
  div * {
    display: inline-block;
  }

  p {
    overflow-x: hidden;
    white-space: nowrap;
    -webkit-transition: width 1s;
  }​
</style>

<div>
  <a><i>begin</i><p><s>middle</s></p><b>end</b></a>
  <a id="after">after</a>
</div>

<script>
  $('div > a').each(function() {
    var a, p;
    a = $(this);
    p = $('p', a);
    a.toggle((function() {
      p.width(0);
    }), function() {
      p.width(p[0].scrollWidth);
    });
  });
</script>

http://jsfiddle.net/qrf3E/

It has the desired effect when using Chrome: http://www.screenr.com/vJH7

But in Safari (desktop and mobile) the apparent width of the container element, a , snaps back to the expanded width when the inner container, p , has collapsed. This forces the following element, #after , to float out in space... Help! Is this a Safari bug? Can anyone offer a fix?

http://www.screenr.com/qJH7

Answer 1

One possible fix that has just occurred to me would be to collapse to a single pixel and then hide:

a.toggle(function() {
  p.one('webkitTransitionEnd', function() {
    p.hide();
  });
  p.width(1);
}, function() {
  p.show();
  p.width(p[0].scrollWidth);
});

http://jsfiddle.net/corin/LsSk2/

Can anyone better that?

Answer 2

Well, this seems to be a forgotten default value by the safari developers.

If you set a { display: inline; } a { display: inline; } it works. http://jsfiddle.net/2t388/