jquery-notebook icon indicating copy to clipboard operation
jquery-notebook copied to clipboard

Problem with bubble when fixed

Open ghost opened this issue 10 years ago • 5 comments

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?

ghost avatar Mar 04 '14 21:03 ghost

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.

raphaelcruzeiro avatar Mar 05 '14 13:03 raphaelcruzeiro

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?

ghost avatar Mar 05 '14 14:03 ghost

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.

raphaelcruzeiro avatar Mar 14 '14 00:03 raphaelcruzeiro

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.

zraly avatar Mar 28 '14 13:03 zraly

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.

raphaelcruzeiro avatar Mar 28 '14 15:03 raphaelcruzeiro