Re: [Tikiwiki-devel] Mouseover and Flickering

[Filipus K. <ch...@gm...>]

On April 16, 2010 07:54:09 am Jonny Bradley wrote:
> 
> Hi Chealer and all
> 
> Short version: hopefully fixed in r 26648 - more below if you're keen...
> 
> Thanks for the analysis of this, it's been quite a tricky one to corner. On some sites i've seen it, and i did a fix a couple of weeks ago that Lindon said had helped, but there's obviously more to this...
> 
> On 16 Apr 2010, at 06:09, Filipus Klutiero wrote:
> 
> > I spent a considerable amount of time on this issue. So far, only Firefox 3.6 is known to be affected. I couldn't reproduce with Iceweasel 3.6 (on Debian), which is based on and very close to Firefox 3.6. We saw the bug on at least two Windows machines.
> > 
> > The problem is some pages have flickering. On affected pages, the page flickers several times during page load. Moreover, when the cursor goes over popups, the page flickers too. This mostly happens with Smarty {popup}, which uses convertOverlib(). In turn, convertOverlib() uses jQuery cluetip. A good example is the popups in the Calendar modules showing events on each day. When the popup for a day pops for the first time, the page flickers twice. The next times, it flickers once.
> 
> convertOverlib is what the {popup} Smarty function uses as the "onmouseover" event, where it used to call the overlib function which generates the tooltip, whereas ClueTip events are intended to be added on document ready.
> 
> The idea is for the function to make the tooltip when it's first activated, and then let ClueTip deal with subsequent calls, hence the two flickers first time, then just one after - 2 different "bugs".
> 
> > Which pages are affected is mysterious. I found there's a relation with select elements. All affected pages I know have a dropdown or a select multiple. For example, the blog post page has a publish time input which contains several dropdowns. If you remove the dropdown for the hour, using Firebug, the flickering disappears (i.e. calendar module popups don't cause flickering anymore). I even found that if you remove enough options from the dropdown, the flickering stops (in this case, flickering stopped exactly when I removed 6 hours, which made the options fit in the dropdown without a scroll bar. But I couldn't reproduce this in a different page). In Admin Look & Feel, the flickering stops if "Users can change theme" is unchecked, because Restrict available themes hides. In Stats, the time period filter dropdowns are also responsible.
> 
> I have a simple case here on my local 5.x where rolling over the admin user logged in label thingy causes a Flash plugin object on the page to flicker badly. I wonder if this is the same thing...
> 
> > This issue doesn't affect Tiki 4 but affects the development code as soon as 5.0 alpha. All sites since then are affected at least in Blog post (which means new installs are not spared). Other problematic pages don't causes issues in all installs; it's hard to understand why.
> > 
> > Not only Smarty {popup} is affected, but also pure cluetips buttons, such as the Help links at the right of page titles and the admin anchor icons at the top of tiki-admin.php. I tried debugging where the flickering happens. Two 
> > lines in tiki-jquery.js convertOverlib() cause flashes:
> > 
> > 		if ($jq(el).width() > $jq(window).width()) {
> > and
> > 		options.width = $jq(el).width();
> 
> Just before these lines it says: "hack to calculate div width" - could be a clue! ;)
> 
> One thing that overlib did very well was to automatically make the tooltip boxes the right width, and when i got to this part i found it wasn't quite as easy as i thought... so making a temporary div with the same content, checking the width of it then removing it and applying the width to the ClueTip div seemed like the only way to have "auto" width.
> 
> This certainly must be where it's causing the trouble (well, the first time only flicker).
> 
> > Which suggests evaluating $jq(el).width() causes a flash. This seems to be a bug that shows up combining Firefox 3.6 and jQuery. I tried searching on Google and found nothing. #jquery didn't know better. I asked for advice to debug but didn't get any.
> > 
> > I already spent several hours on this and although I made progress I'm not yet close to a solution, so I'm letting the issue rest for now. I'm hoping Jonny can help make progress :-S
> 
> It seems that adding divs to the end of the body seems to make Firefox unhappy. I've fixed (in r26648) the defaults for ClueTips, and how convertOverlib makes it's temp div which fixes most of these flickers.
> 
> However, i see there are still a few more to go - the mouseover plugin also flickers for me, even though the div is written into the page server-side...
> 
> Still - hope this really fixes some of this for others out there - let me know here how you get on.

Good job, it seems to be fixed on my local install :-) I can't even see the issue with the MOUSEOVER plugin.
> 
> jb
> 
> 
> > 
> > On April 9, 2010 07:10:38 am Jonny Bradley wrote:
> >> Hi Gary and all
> >> 
> >> I'm jonnybradley on both of those sites but no admin. This sounds like
> >> something to do with me, so if i can compare the two i might be able to
> >> work out what it's doing.
> >> 
> >> It's the convertOverlib function, specifically the bit where it makes a
> >> hidden version of the content to see how big it should be. I thought a fix
> >> a few weeks ago had sorted it (on Lindon's site anyway) but obviously
> >> not...
> >> 
> >> jb
> >> 
> >> On 8 Apr 2010, at 04:04, Gary Cunningham-Lee wrote:
> >>> No, I have only a few categories. I don't know about giving you access
> >>> to the site, since it's just my laptop's localhost. But I get the
> >>> flickering at http://branding.tikiwiki.org/tiki-admin.php?page=look,
> >>> although I don't at http://themes.tikiwiki.org/tiki-admin.php?page=look.
> >>> If you register at these sites I'll give you access to the admin pages.
> >>> 
> >>> -- Gary
> >>> 
> >>> Filipus Klutiero wrote:
> >>>> Do you have lots of categories, enough to "overflow the dropdown"? If
> >>>> so, what happens if you remove some (either by removing categories or by
> >>>> removing the dropdown option elements using Firebug)? Alternatively,
> >>>> could you give me access to that site?
> >>>> 
> >>>> Le avril 5, 2010 12:13:49 AM, Gary Cunningham-Lee a écrit :
> >>>>> In the latest branch 5, when I mouseover image names in
> >>>>> /tiki-list_file_gallery.php?galleryId=n, the page 'blinks' twice as the
> >>>>> popup displays, in Firefox 3.6.3 (Windows), in the first mouseover. On
> >>>>> subsequent mouseovers on the same thumbnail, the page blinks once. By
> >>>>> blink, I mean there is a white page for a fraction of a second. I don't
> >>>>> see this happening at all in other browsers (I checked Opera, SRWare
> >>>>> Iron (webkit), and IE7).
> >>>>> 
> >>>>> There seems to be less FF flickering on page load than before, overall.
> >>>>> I'm not seeing it much in the current branch 5.
> >>>>> 
> >>>>> -- Gary
> >>>>> 
> >>>>> Filipus Klutiero wrote:
> >>>>>> I fixed the bug on April 1 in r26426 on branch 5.x. Maybe your install
> >>>>>> is not quite fresh enough. The fix was probably not ported to trunk
> >>>>>> yet.
> >>>>>> 
> >>>>>> Le avril 4, 2010 04:04:22 PM, Sylvie Greverend a écrit :
> >>>>>>> I have  the problem too - not on dev or doc - but on my local - and
> >>>>>>> with a fresh install .... Seems to be very tricky situation
> >>>>>>> 
> >>>>>>> On Sun, 2010-04-04 at 14:02 -0400, Filipus Klutiero wrote:
> >>>>>>>> Le avril 3, 2010 08:41:52 PM, lindon a écrit :
> >>>>>>>>> Two separate issues:
> >>>>>>>>> 
> >>>>>>>>> - When thumb=mouseover is used in the img plugin, there is a stray
> >>>>>>>>> capital A with an accent over it that appears in the top left of
> >>>>>>>>> the image that pops up upon mouseover. You can see it (at least in
> >>>>>>>>> Firefox 3.6.3 and IE8) by mousing over any of the thumbnails at
> >>>>>>>>> http://dev.tikiwiki.org/Development+Environment
> >>>>>>>>> <http://dev.tikiwiki.org/Development+Environment%20>
> >>>>>>>> 
> >>>>>>>> That link is broken, but assuming you're talking about
> >>>>>>>> http://dev.tikiwiki.org/tiki-index.php?page=Development%20Environmen
> >>>>>>>> t%3A%20XAMPP-Aptana I don't see the issue. I believe this is because
> >>>>>>>> the site was just updated, benefitting from the recent fix to Smarty
> >>>>>>>> {popup}