offset(refs.ceilBub, pixelize(barWidth - width(refs.ceilBub))) is called on initialization. If initialization occurs while the containing DOM element is in the middle of a CSS transition, however, the final barWidth is still TBD. Consequently, the value for style="left:X" on bubble.ceiling can be set mid-transition and will, as a result, not be fully aligned to the right.
For example: I am revealing the slider after a click event. The slider is set to be 100% of its parent (via CSS) so I can animate its appearance. When the user clicks a button, the slider "grows" into view using the CSS transition:width. Because the offset method is called to set the bubble.ceiling DOM element's left position before the transition finishes, however, the ceilBub is not properly right aligned and appears somewhere in the middle of the bar (depending upon the length of the transition).
Solution:
It seems to me that the ceilBub is ALWAYS right aligned. I can't think of any case where we would want the ceilBub to not be fully aligned right. Therefore, why not simply use style="right:0px" in all cases? If we did, calling offset(refs.ceilBub, pixelize(barWidth - width(refs.ceilBub))) would be altogether unnecessary.
offset(refs.ceilBub, pixelize(barWidth - width(refs.ceilBub))) is called on initialization. If initialization occurs while the containing DOM element is in the middle of a CSS transition, however, the final barWidth is still TBD. Consequently, the value for style="left:X" on bubble.ceiling can be set mid-transition and will, as a result, not be fully aligned to the right.
For example: I am revealing the slider after a click event. The slider is set to be 100% of its parent (via CSS) so I can animate its appearance. When the user clicks a button, the slider "grows" into view using the CSS transition:width. Because the offset method is called to set the bubble.ceiling DOM element's left position before the transition finishes, however, the ceilBub is not properly right aligned and appears somewhere in the middle of the bar (depending upon the length of the transition).
Solution: It seems to me that the ceilBub is ALWAYS right aligned. I can't think of any case where we would want the ceilBub to not be fully aligned right. Therefore, why not simply use style="right:0px" in all cases? If we did, calling offset(refs.ceilBub, pixelize(barWidth - width(refs.ceilBub))) would be altogether unnecessary.