Skip to content
This repository has been archived by the owner on Nov 15, 2022. It is now read-only.

bubble.ceiling will not position correctly if parent DOM element uses a CSS transition on width #78

Open
luvaas opened this issue Dec 30, 2014 · 0 comments

Comments

@luvaas
Copy link

luvaas commented Dec 30, 2014

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant