• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Flickering

#1
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;

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

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

Screen Shot 2014-01-19 at 20.39.50.png
 

Mike

XenForo developer
Staff member
#2
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.
 
#3
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

XenForo developer
Staff member
#6
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?
 
#7
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
 
#8
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)

Code:
 <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>
 
#12
Fab, that's done the trick. No more flickering! :D

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)

Code:
<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>
 

Brogan

XenForo moderator
Staff member
#13
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 ;)