Hello,I have been experiencing a flicker on the very first load (cache, cookies cleared). We are using mbox.js Version 62. To try to remedy this issue, I’ve tested this in two ways:Using the Visual Composer to make the edits:- Flicker is still there on the _very first_ load, and seems to work on subsequent visits.Using vanilla javascript to immediately inject a style with visibility: hidden through the custom code section (in the head). Then show it (visibility: visible) after the content loads.- Flicker is still there on the _very first_ load, but works on subsequent visitsIn the previous release notes it stated that:Mbox Version 61 (16.7.2) Body hiding is disabled by default. Target uses body hiding only when global mbox auto-create is enabled and body hiding is enabled.AndMbox Version 60 (16.4.1) window.targetGlobalSettings = { bodyHidingEnabled: true, bodyHiddenStyle: "body{opacity:0}", visitorPageDisplayTimeout: 2000 };Would anyone know if Is this a setting that we could implement? The release notes also stated that:“New Visitor scenarios might have flicker”When using v58 to v60 with the visitor id service, mbox calls will wait for the visitor id to be set before firing (or until a timeout has occurred). This happens on the first page load of a new visitor.Which also suggests that it is a limitation on all first visitors? Would it be possible to get clarification on this issue? Specifically whether there is a setting we can set (with mbox.js 62), or will there always be that flicker on the first page visit?Thank you,Chung

chungk67205631

New Participant

Solved

Flicker Problem

Forum|Forum|8 years ago
June 7, 2017
12 replies
16067 views

Hello,

I have been experiencing a flicker on the very first load (cache, cookies cleared). We are using mbox.js Version 62. To try to remedy this issue, I’ve tested this in two ways:

Using the Visual Composer to make the edits:

- Flicker is still there on the _very first_ load, and seems to work on subsequent visits.

Using vanilla javascript to immediately inject a style with visibility: hidden through the custom code section (in the head). Then show it (visibility: visible) after the content loads.

- Flicker is still there on the _very first_ load, but works on subsequent visits

In the previous release notes it stated that:

Mbox Version 61 (16.7.2)

Body hiding is disabled by default. Target uses body hiding only when global mbox auto-create is enabled and body hiding is enabled.

And

Mbox Version 60 (16.4.1)

window.targetGlobalSettings = {

bodyHidingEnabled: true,

bodyHiddenStyle: "body{opacity:0}",

visitorPageDisplayTimeout: 2000

};

Would anyone know if Is this a setting that we could implement?

The release notes also stated that:

“New Visitor scenarios might have flicker”

When using v58 to v60 with the visitor id service, mbox calls will wait for the visitor id to be set before firing (or until a timeout has occurred). This happens on the first page load of a new visitor.

Which also suggests that it is a limitation on all first visitors?

Would it be possible to get clarification on this issue? Specifically whether there is a setting we can set (with mbox.js 62), or will there always be that flicker on the first page visit?

Thank you,

Chung

Target

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by michael_van_sta

@YogitaBist & @chungkchungk67205631

I have a hack i've written for this specific use case : )

You need to add this to the code editor/snippet to your A/B test:

<style>

.FH .YOUR_ELEMENT {display: none;}

</style>

$('html').addClass('FH');

$( document ).ready(function() {

$('.YOUR_ELEMENT').show();

});

</script>

The javascript adds a class "FH" to the body, the CSS hides the desires element by class or ID.

Once the DOM is ready - it'll trigger to show your element thus preventing strange flickering if manipulating an object.

There are a good few ways to skin this cat it just depends on what you're doing exactly.

This way _should_ work for you seeing as CSS doesn't rely on waiting for the JS call to hide it and then show it again, as this should be loaded in the head and happen before DOM load : )