Picture of Barry Jenkin
Flicker in IE11
by Barry Jenkin - Tuesday, 21 August 2018, 4:34 AM
 

I've been getting for some time an occasional rather annoying flicker onscreen in Explorer 11 that only appears when trickle is enabled and where there are components using opacity.

It seems to occur mostly when trickling to blocks that contain static components like Graphic or Text on a page that also includes a component such as Tabs or a quiz with the Tutor feedback overlay. Without these the trickling runs smooth.

Thought it was my theme but I've reproduced the issue using the latest Vanilla theme and Box menu in the latest AT. Any ideas what this might be?

Picture of Oliver Foster
Re: Flicker in IE11
by Oliver Foster - Wednesday, 22 August 2018, 9:48 AM
 

It's probably to do with the way trickle focuses on the destination and performs scrolling.

You can test the theory by running this in your console before interacting with trickle:

$.fn.focusNoScroll = function() {};


This is I think might just be an order of execution issue in trickle, the focus should be happening after the scroll whereas it sounds like it's happening before the scroll.

We use an older version of the 'preventScroll' option on HTMLElement.focus which can cause what you're describing by which is supposed to mitigate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

It sounds like the timing is off or the css render can't handle it.

Trickle asks adapt to scroll
https://github.com/adaptlearning/adapt-contrib-trickle/blob/master/js/adapt-contrib-trickle.js#L109
Adapt performs focus after scroll (by adding 300ms to the expected animation duration)
https://github.com/adaptlearning/adapt_framework/blob/master/src/core/js/adapt.js#L171
FocusNoScroll is called to assign focus
https://github.com/adaptlearning/adapt_framework/blob/master/src/core/js/libraries/jquery.a11y.js#L380-L393


Picture of Barry Jenkin
Re: Flicker in IE11
by Barry Jenkin - Thursday, 23 August 2018, 8:21 AM
 

Ah that makes sense. I suspect timing is a big factor as it seems to only happen where elements using opacity or transform are on the same page. I'm mainly getting it in and around block sliders and notify popups. When these are disabled the flickering disappears. Bloody Explorer ..