[Popup] Review Edge Detection

[tazator]

Hi everyone!
I have a problems with popup on Chrome 43.0.2357.130.
The popup with click event, it's ok.

//WORKS
$('.ui.icon.button').popup({on:'click'});

But with hover event (by default), the popup don't show.

// WILL NOT WORKS
$('.ui.icon.button').popup();

Example of code

<div class="ui icon button" data-content="Add users to your feed">
  <i class="add icon"></i>
</div>

I have the same problem with my website or with semantic-ui website
On Firefox no problems (click and hover)

[jlukic]

Please fork the jsfiddle in readme to create a test case.

[BigGrecian]

tazator : http://codepen.io/Biggrecian/pen/vOdwLd is this what you are experiencing in a menu? Number 1 works but numbers 2 and 3 don't ?

If so try the code :
$('.example .menu .browse') .popup({ inline : true, hoverable: true, position : 'bottom left', delay: { show: 300, hide: 800 } }) ;

[tazator]

jlukic : I'm sorry, here is http://jsfiddle.net/Le9ys6zk/7/
On Chrome btn1 doesn't work, and btn2 works
On Firefox btn1 and btn2 works

I have a same problem on http://semantic-ui.com/modules/popup.html

BigGrecian : On my Google Chrome (v 43.0.2357.130) numbers 1, 2 and 3 doesn't work
Just works with code :

$('.status1.item').popup({on:'click'});

[basicserge]

Completely the same problem as @tazator mentioned. (Chrome 43.0.2357.132, win 8 64bit)

[jlukic]

Additional test case from other threads
http://codepen.io/krobinson/pen/gpKMPQ
https://jsfiddle.net/rduvhn8u/51/
http://codepen.io/Biggrecian/pen/vOdwLd
https://jsfiddle.net/BigGrecian/rduvhn8u/65/

[jlukic]

It appears with elements that are "just next to" the edge of the page it returns an offset slightly below 0, due to rounding issues.

I've added a new setting jitter which is the amount of pixels a popup is allowed to exceed the boundary of its context. Default setting is 2 pixels, although in most cases this will be < 1 pixel

[jlukic]

With regards to this example,
http://codepen.io/krobinson/pen/gpKMPQ

The first button is not showing because the popup is set to 100% page width but is pointing to an element in the middle of the page. This would mean most of the popup would have to display off screen.

[jlukic]

@ksr583 I've figured out what's going on for your issue.

Popups can't use width: 100%; for positioning when inline because the popup will always exceed its parents containers width. The way around this was a setting setFluidWidth and internally setting the css width in JS to offsetContainer.width on show.

However in your example, although the element is inside a container its offsetContext is body since there is no position: relative; on container (or transform context but lets not go there).

The solution is in the case of fluid popup to also check .parent() element width, regardless of whether it is offsetContext and use that for fluid width. See 5d113c0 above

[jlukic]

@ksr583 Working example JSfiddle from next patch
http://jsfiddle.net/hg20jadx/

[jlukic]

Let me know if anyone experiences any issues testing against next. This will land with next patch

[tazator]

I'm so sorry but the issues is again with chrome (Version 43.0.2357.134 m) on windows 8.1 64bits. The issues is just with cursor mouse. But with tactile function no problem, it's ok.

With chrome (Version 43.0.2357.134 m) on windows 7 64bits no problem, it's ok.

[jlukic]

Test case please

[tazator]

http://jsfiddle.net/626b86v9/5/

With chrome (Version 44.0.2403.89 m)
On Windows 8.1 64bits, cursor hover event and click doesn't work, but tactile function work.
On Windows 7 64bits all work

[jlukic]

I'm not able to replicate on win7 (which you says works)

Are you using a tablet computer? Something with both touch and mouse?

[tazator]

Yes my computer has a touchscreen (it's laptop)
@basicserge has the same problem on Win 8

[jlukic]

Yeah, I've dealt with this issue.. years ago. #61

hasTouch is being used to determine events, but in cases where both are available it fails to add mouse events (which is to prevent two events firing from simulated events)

It's a pretty frustrating bug to deal with but I'll see what I can do

[tazator]

But with semantic-ui 1.x on same computer, the hover event of mouse work (if that help)

[jlukic]

Yes it does help. I can see the difference

https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/popup.js#L887 this probably should be if not else if

[jlukic]

Please continue discussion in #2715