Tippyjs: Scroll bar flicker in IE11 when a container's height is 100%

[lozinsky]

In the case when a container's height is 100%, when you hover over the tippy reference in IE11, a scroll bar appears then immediately disappears. Is there any way to solve this problem?

How to reproduce:

1. Open https://jsfiddle.net/12amsko5 in IE11
2. Hover over some box

Preview:

(low fps, in real case reproduced more often)

[atomiks]

Maybe:

1. overflow-y: scroll to keep scroll bar visible at all times
2. lazy: false to create the popperInstance on init - if this does solve it, there may be a way to keep lazy behavior with a fix (which is preferred for performance reasons)

[atomiks]

Found a fix

(Unless the element is positioned right next to / under the scroll bar, it flickers still -- not sure if that one can be fixed. The ones to the left are fixed)

It's pushed to the v5 branch - I don't know/think I can backport all of the fixes made in v5 into v4 since it's quite a big effort (especially the tests)... we'll see.

[lozinsky]

The problem is reproduced again in 4.3.4 version, if followCursor and delay options are passed.
Without delay option everything works correctly.

How to reproduce:

1. Open https://jsfiddle.net/8jswqv09 in IE11
2. Hover over some box

Preview:

(low fps, in real case reproduced more often)

[atomiks]

Is it reproducible in 4.3.3 as well?

[lozinsky]

No, in 4.3.3 everything works correctly.

[atomiks]

Does it only happen w/ followCursor? I don't easy access to IE to test

try these maybe

lazy: false

popperOptions: {
  modifiers: {
    computeStyle: {gpuAcceleration: false}
  }
}

[atomiks]

Can you try this?

tippy(".box", {
  content: "Tooltip",
  followCursor: true,
    delay: [500, 100],
  animateFill: false,
  popperOptions: {
    modifiers: {
        applyStyle: {
        enabled: false
      }
    }
  }
});

Is it positioned in the top left corner in IE11 without a jump?

[lozinsky]

Does it only happen w/ followCursor?

Yep, with gpuAcceleration: false flickers only bottom scroll bar, lazy: false in this case does not affect.

Is it positioned in the top left corner in IE11 without a jump?

Yep, a jump is reproduced only from the right window border in IE11.

[atomiks]

IE11 is the worst tbh.

Feel free to edit node_modules code to debug it cuz I can't test it for a while. Relevant functions are function createPopperElement() utility (and how it assigns position absolute and top/left 0 initially) and function mount() + currentMountCallback inside the createTippy factory function.

[atomiks]

Is it reproducible in tippy.js@next version?

https://jsfiddle.net/1kjhdvns/

[lozinsky]

Yes, the problem is reproduced in tippy.js@next.

[atomiks]

I downloaded a VM again for IE11 lol (new computer). As far as I can tell it only flickers (using @next) when hovering over the element right under/next to the scroll bar. I would consider that not too bad considering:

1) it's IE11, 6 year old browser where weird glitches are expected
2) it's an aesthetic not functional bug, not a big deal
3) only happens in a very specific configuration at a very specific placement

[lozinsky]

In version 5.0.2 the problem no longer reproduces.
Thanks so much for this release 🎉

[atomiks]

Interesting..

[usb248]

@atomiks flickering comes back in last release. The tooltip jump to top-left of the window... Any workaround for IE ?

[atomiks]

You'll have to submit a PR if you want any more IE fixes lol. Not investigating that browser ever again

[usb248]

This is not the answer I expected :sweat_smile: