Floatbox "blinks" in Chrome only

Page: 1

Author Post
Member
Registered: Sep 2013
Posts: 6
Great script, but when I use it in Google Chrome, the images "blinks" when sliding/crossfading between images.

my floatbox options are


resizeDuration: 2,
enableDragMove: false,
navType: "overlay",
showIE6EndOfLife: true,
imageTransition: "none"


I've got the images grouped with

data-fb-options="group:group1"


and the class is
class="alt floatbox"


It works fine in other browsers :) Any ideas to what
Administrator
Registered: Aug 2008
Posts: 3382
From the options in use I am guessing that you're using a version 5 of Floatbox. I can't give a definitive answer to your issue right now because I don't have access to a version 5 test-bed at this time.

You say the blinking occurs when sliding/crossfading, and yet imageTransition:"none" is set in the options, which turns off sliding/crossfading behaviour.

Assuming the problem is occurring with the quoted option set and when the images are instantly "snapping" to the next, the easiest solution may be to remove the imageTransition option and allow the images to cross-fade. You could get the images to swap quickly, if that's what you're looking for, by setting transitionDuration:1.

That the problem occurs only in one browser suggests that we have to work around it and can't fix it directly in Floatbox code. It would likely need to be fixed by the Chrome team.
Member
Registered: Sep 2013
Posts: 6
Thx for the reply. It helped a little, but it does work proper and as smooth as your demos.

I've recorded a small video of the transition / blinks, which I hope may shed some light on the problem.

Floatbox options:

resizeDuration: 2,
enableDragMove: false,
navType: "overlay",
showIE6EndOfLife: true,
transitionDuration: 1


The video are her: http://screencast.com/t/zmvr9RkTjnX8

What are my possibilities to make it work more smoothly in Chrome?
Administrator
Registered: Aug 2008
Posts: 3382
I can't debug a video. Can you link me into a page that shows the problem?

Assuming the image gallery on the demo page on this site is smooth in your browser, perhaps you should model your gallery on mine, which is pretty much just using the floatbox defaults for all settings.
Member
Registered: Sep 2013
Posts: 6
At the moment, I can't give you a direct link to the page, but I may have found something different, which may cause my problem.

At the a tag, I use
data-fb-options="type:image group:overview"
and the href is generated on the fly. The same is the img src, it is not hardcorded.

I tried hardcording a href on the a tag and img src. Now it works great...
« Last edit by Graahf on Wed Sep 18, 2013 6:15 am. »
Administrator
Registered: Aug 2008
Posts: 3382
Ah - a "must run fb.activate() after dynamically adding or modifying floatbox links" problem. It comes up often.

I'm glad it's settled.
Member
Registered: Sep 2013
Posts: 6
Hi again,

Stil a problem... Got any idea, when I'm using an onerror src on the image? When I remove the onerror src, it works flawless, but need the onerror src.
Administrator
Registered: Aug 2008
Posts: 3382
I can't be much help with this - the problem most likely lies in the content. It sounds like your onerror handler is firing and replacing the img src. No doubt the "blink" is the change or reload of the image as a result of the src modification.

You say you need the onerror handler to be present. This suggests to me that you are setting a non-existent src path on the floatbox link and then flipping it to something else when it bombs. Floatbox can't support that approach. It can cleanly display only images that exist and that are specified with their valid path.

There's a lot of guessing in this response because you cannot provide a working example of the problem. I keep promising myself not to try to solve anymore problems by guessing based on a description, but I repeatedly fail to keep this promise. If you want any further follow-up on this thread, you must provide an online working demo of the issue - no screen shots or code snippets, just a live page.

Cheers...

Page: 1