XF 1.2 Flickering

[RoyalRumble]

Hi,

Please excuse the vague title, I couldn't think how else to describe this...

When there is a page load - there is 'a flicker' effect.

An example.

The forum home initially loads as "Latest: Jan 19 2014 at 8:07PM" before changing to "Latest: 28 minutes ago"

This happens within forums too, and the navbar loads without Home/Resources/Members before eventually appearing.

It's really off-putting. I've attached examples below and the test forum here - any advice very welcome

Mobile;

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Desktop (I click forum twice in succession, hence the two 'flickers')

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

List of Add Ons (this error occurs will all disabled)

 

[Mike]

That is actually how the page is loading. It's the JS that changes it on load. To some degree, it can be expected, though there may be differences based on how browsers render. That said, are you seeing it here? If not, the first thing I would do is check on the default style and then disable add-ons to see if that appears to make a difference.

 

[RoyalRumble]

That is actually how the page is loading. It's the JS that changes it on load. To some degree, it can be expected, though there may be differences based on how browsers render. That said, are you seeing it here? If not, the first thing I would do is check on the default style and then disable add-ons to see if that appears to make a difference.

Thanks Mike, appreciate the reply.

I tested on here and two other XenForo forums and didn't have the problem.

I listed by Add Ons in the OP (at the bottom) I don't have many and the problem persists with all disabled.

I also reverted all JS templates (I edited very slightly to include AdBlock Detection)

Hoping I can resolve as I couldn't go live with the forum risking causing seizures

 

[Mike]

Can you link to the forum so we can demo it?

 

[RoyalRumble]

Can you link to the forum so we can demo it?

Absolutely - I did link it in OP

It's here

If you would be kind enough too, I'd be delighted to send you an Admin Login if that could help.

 

[Mike]

Sorry, missed that.

FWIW, I did notice it on the first view, but generally didn't notice it beyond that, certainly not consistently (Chrome). I didn't see it at all in Firefox.

I would check on a bog standard style. It's possible that it could be related to the ads?

 

[RoyalRumble]

Thanks for taking the time to look Mike.

FWIW, I did notice it on the first view, but generally didn't notice it beyond that, certainly not consistently (Chrome). I didn't see it at all in Firefox.

Yeah it's very odd in that it comes and goes, I worry when I make the forum live and it has 700+ users online simultaneously it may be worse as content updates.

I would check on a bog standard style. It's possible that it could be related to the ads?

It is the standard default style with very little colour changing - is that what you mean?

I don't think its ads related, I disabled them but it still occurred.

The main headache is viewing on a mobile (Safari), the navbar links jump on every page load. I just installed a fresh default style an the problem doesn't occur, so it's something I've done but I can't seem to isolate it to resolve

 

[RoyalRumble]

Update.

@Mike - You was correct in that it was adverts causing this problem. I forgot I had one in the footer.

This is my code, any idea what might be causing the problem (It's particularly consistent/bad in responsive)

 <style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-123" data-ad-slot="123"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

 

[Paul B]

I have Google AdSense on my site, do you see the problem there?

http://cliptheapex.com/

This is how mine are implemented: http://xenforo.com/community/resources/responsive-adsense.2084/

 

[RoyalRumble]

Thanks @Brogan , you've helped so much in my effort to get my test XenForo live prior migration

I did try that resource (Honest, I do search ) but it would crop (as below) and I'm pretty sure violates Adsense's T&C's so I opted for the responsive ad unit/asynchronous code https://support.google.com/adsense/answer/3213689

 

[Paul B]

http://xenforo.com/community/resources/responsive-adsense.2084/update?update=5334



That's what I use.

 

[RoyalRumble]

Fab, that's done the trick. No more flickering!

One last question if I may Noticing your the resource manager of the Adsense, I don't suppose you know whether the below is compliant? (Simple adblock detect, but its the resize of an add unit meant to be 320 to 300 that worries me - still relevant to this thread as the 320 pushes the frame on an iphone which is what I think causes flickering on page load)

<div class="blockContainer">
    <div class="adContainer">
        <center>

<style type="text/css">
.overtaking-top-dynamic {
width: 300px;
height: 50px;
}

@media(min-width: 484px) {
    .overtaking-top-dynamic {
    width: 468px;
    height: 60px;
    }
   
    @media(min-width: 743px) {
    .overtaking-top-dynamic {
    width: 728px;
    height: 90px;
    }
}
</style>

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Overtaking Top - Dynamic -->
<ins class="adsbygoogle overtaking-top-dynamic"
    style="display:inline-block"
    data-ad-client="ca-pub-123"
    data-ad-slot="123"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


</center>
    </div>

    <div class="noticeContainer hidden">
        <div class="head">Oh man! Ad-blocking software has been detected! :'(</div>
        <div class="foot">
            Text advising user to make website exempt from adblock
        </div>
    </div>
</div>

 

[Paul B]

Unfortunately the iphone screen width is only 320px wide and those ad units are also 320px so any padding and margins are going to be an issue.

Blame Apple