Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Popover on hover of item at top-left of page broken in IE11 #25267

Closed
TheAnsarya opened this issue Jan 10, 2018 · 9 comments
Closed

Popover on hover of item at top-left of page broken in IE11 #25267

TheAnsarya opened this issue Jan 10, 2018 · 9 comments
Labels
confirmed js v4

Comments

@TheAnsarya
Copy link

TheAnsarya commented Jan 10, 2018 •
edited

Bootstrap 4 beta 3
OS: Windows 10 (1511)
Browser: IE 11.1295.10586.0CO

This issue only seems to affect IE11 (and IE10) which are considered supported browsers. Chrome 63 is fine and Firefox 57 has a slight stutter but still works. This was also occurring in beta 2.

When a Popover is activated on hover by an element on the top left of the page, it is initially placed at top=0, left=0 and so the mouse is over the Popover, not the hover trigger so the Popover is hidden, which triggers the hover event again and this loop repeats very quickly causing the Popover to flash on the screen (still in the wrong position).

This can be recreated with a very simple demo:

<body>
	<button id="popoverButton" class="btn btn-primary">Popover</button>
</body>
$(function() {
	$("#popoverButton").popover({
		trigger: "hover",
		title: "Title of the popover",
		content: "Enough content to make the Popover appear over the trigger."
	});
});

( CodePen here: https://codepen.io/ansarya/pen/dJmdMm )

I haven't found any mention of this on the internet or in the issues or in the BS4 documentation. I also have not been able to find a fix on my own although I did wonder if it has to do with the top=0, left=0 and the position being determined by the transform property instead and IE not handling the transform immediately.

I do hope this is the correct place to raise this issue and if not, please direct me there.
@Johann-S
Copy link
Member

Confirmed on IE 11 (with Win 10)

@ysds
Copy link
Member

ysds commented Jan 12, 2018

Quick fix: Add pointer-events: none into popover via template option:

template: '<div class="popover" role="tooltip" style="pointer-events: none;"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',

@Johann-S
Copy link
Member

Seems like a positioning issue here 😟

/CC @FezVrasta

@TheAnsarya
Copy link
Author

@ysds - The quick fix does work well in IE 11.

https://codepen.io/ansarya/pen/qpMLRJ

I doubt if pointer-events: none; is appropriate for all Popovers but it does work in this use case.

@ysds
Copy link
Member

ysds commented Jan 16, 2018 •
edited

Yes it just a quick fix for hover trigger. It will make low usability when click trigger because pointer-event: none disable selectable text in the popover. A fundamental fix should be necessary.

@kbeckwith
Copy link

Still broken

@VSquash
Copy link

VSquash commented Mar 15, 2021

Still broken in IE

@mdo
Copy link
Member

mdo commented Jun 14, 2021

@twbs/js-review Thoughts on this? Realizing we might have some rather old v4 issues lying around that we should evaluate.

@mdo
Copy link
Member

mdo commented Apr 13, 2022

Closing as stale for v4. We'll be moving onto focus entirely on v5 and v4 will only see critical updates.

@mdo mdo closed this as not planned Won't fix, can't repro, duplicate, stale Apr 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed js v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@mdo @Johann-S @ysds @VSquash @TheAnsarya @kbeckwith