jquery-notebook
jquery-notebook copied to clipboard
Problem with bubble when fixed
Here I set up a http://jsfiddle.net/M3vak/2/ to see the problem.
To reproduce scroll down a little bit and then try to activate bubble. you will see that matrix is calculated as if it was not scrolled.
If scrollTop is 0, then everything is okay.
BTW offtopic: why in first place you are using matrix? why wan't you just position it as fixed element?
This is probably a duplicate of #80. The bubble positioning had mistakenly set to fixed on a previous commit but this has been solved. Please confirm that this is the issue.
PS: The bubble is been positioned using a transform due to performance reasons and a strange issue on webkit where the bubble would mess up the drawing of the selection if it was absolutely positioned. As the transform is processed on the GPU this drawing issue does not occur anymore.
I can't confirm this. I used latest version. with:
if (s != null) {
if (s.collapsed) {
bubble.clear.call(elem);
} else {
bubble.show.call(elem);
}
but this does not work
updatePos: function(editor, elem) {
var sel = w.getSelection(),
range = sel.getRangeAt(0),
boundary = range.getBoundingClientRect(),
bubbleWidth = elem.width(),
bubbleHeight = elem.height(),
offset = editor.offset().left,
pos = {
x: (boundary.left + boundary.width / 2) - (bubbleWidth / 2),
y: boundary.top - bubbleHeight - 8 + $(document).scrollTop()
};
transform.translate(elem, pos.x, pos.y);
}
here as you can see, you add $(document).scrollTop() to the bubble position. but when editor is inside fixed container, bubble position will be wrong.
BTW: offset = editor.offset().left, <-- is not this old?
I think there is an open pull request on this issue but as it was based upon an earlier version merging will be difficult. I'll contact the author of the PR and see if he can apply his changes on the current code base.
Absolute position of Bubble is bad for fixed positioned editor. Fixed position of Bubble is bad for scrolling.
So what about to set Bubble position to mouse position? Bubble is mouse-related component (you click on it), so it should work.
Mouse position will not always be right as I can make the bubble appear using only the keyboard. This could also be solved by using using position fixed for the bubble, but adding the editor offset to the bubble position.