CSS-Tricks/MovingBoxes

disturbing flicker while transition, predominant in IE8, fallback option suggested. Another IE8 bug

deeptish opened this issue · 6 comments

deeptish commented

Hi,

I understand that image flicker while transition would be an issue which is difficult to get rid of. Correct me if I am wrong. Is it possible to have a super smooth transition between slides? Check demo at:

LINK
http://www.saccidanandasociety.org/ss-test/audio-showcase-mb/ (username:one; password:one)

TRIED
I have tried with different easeOut and speed settings using jquery-ui without luck.

SUGGESTION:
I have a suggestion, as a fallback can we a simple fade transition which can be set for some browsers? Some blurring of slides may be another option.

BUG
In IE8 (xp) the image flicker is tremendous and there seems to be another issue.

After the last slide, right button is hidden but the area is still active. Pressing -> arrow again and then <- makes moving box to behave weird. The navigation panel shows Topsy turvy positioning etc. This seems to be a bug. Such thing does not seem to exist in IE9 (win7).

Regards,

DD

Mottie commented

Hi deeptish!

It appears to me to be more of an issue of jittery animation than image flickering; but I'm not really using IE8, I'm using IETester.

I'm not sure a fade transition would work here since the boxes are sliding and resizing. And I don't think blurring is even possible in IE8, or maybe it is with the css filter. Either way, I think the best option would be to use conditional comments to detect IE8 and if found, set the reducedSize option to 1 so there is no resizing of panels.

Lastly, I'm not seeing the issue with the right button when on the last slide. The css hides the button using display:none in the css:

a.mb-scrollButtons.disabled {
    display: none;
}

so it shouldn't be doing this...

Edit: Hmm, ok now that I look at it, I don't think IE7 works with chained class names in the css. Just change that css to:

a.disabled {
    display: none;
}

Edit2: Ok, IE7 does support chained classes, but change that css just in case anyway :P

deeptish commented

Hello Mottie,

Thanks for writing back.

  1. I used resize option = 1, yesterday to see if there is any improvement; it did help little; But would try again when I get back to home and access my laptop running XP.
  2. I suggested fade as I tried speed = 0; to get rid of flickering; and still contrasting images create jerk while navigating. So I thought something like speed=0; and fade=300ms would still make it usable in IE8 or earlier.
  3. The right button issue is something else that what could communicate in my first post.

To re-frame: At the last slide the button gets hidden all-right, but the area is still clickable!! At least once. This is the fun of the fact that I experienced yesterday. And after the flurry of new issues occur when keyboard navigation is used.

  1. Another Observation/Question:
    You have used 2 css files, isn't is all-right to use only one and get the code validated for all browsers using prefixr.com ??

Thanks again,

DD

Sorry: Accidentally I closed the topic!

Mottie commented

Hi DD!

Any luck?

I'm not sure how you are fading panels, but you could use the callback functions/events to fade panels in and out, just don't use fadeOut because the panel will be set with display: none when the opacity reaches zero.

I have no idea what you tell you about the clickable region... maybe we need to set the height to zero as well?

The reason for the two css files is to allow use of conditional comments to load the ie stylesheet for older browsers. For AnythingSlider, I've actually dynamically added the conditional comments and added a class name to the document body to distinguish the browser versions. Then the css files could be combined and the ie-specific css would have something like .old-ie prefixing the definitions.

deeptish commented

Hello Mottie,

Sorry for writing back after bit of a break. I have my left knee twisted last Friday while trying out a extravagant shot in a table tennis game. hah! Hope you are doing fine.

OK, now one good news and another not so good.

Good is that IE8 gotcha is caught. Its an option "caret browsing" that was playing the mischief. Plethora of issues crops up (I already discussed those) when this option is enabled in IE8. Somehow this was turned on in my laptop xp. I don't know how you would take it, but at least user should be warned on this. I have not check IE9 with this option though.

The other part, cross-fading the previous and current slide, I could not do tweaking the callbacks what I wanted. Ended up with something like:

// callback before any animation occurs
beforeAnimation: function(e, slider, tar){

    slider.$panels.eq(tar-1).fadeTo(500, .33);
    slider.$panels.eq(tar+1).fadeTo(500, .33 );
    slider.$panels.eq(tar).fadeTo(500, .33);

    },
// callback after animation completes
completed: function(e, slider, tar){

    slider.$panels.eq(tar-1).fadeTo(500, .33);
    slider.$panels.eq(tar+1).fadeTo(500, .33 );
    slider.$panels.eq(tar).fadeTo(1, .33).fadeTo(700, .99);
}

But beforeAnimation: callback seems not working.

However, I could not do what I actually wanted for IE, which is

  1. speed = 0;
  2. crossfade previous and current slide, i.e. fadeOut previous and fadeIn current.
  3. both left and right previous slides sits right or left with or without crossfade

There is another observation that if I have more than 30 slides with limited width, the idea navigation bullets is bit clumsy. optional thumbnail display with autoslide (showing only 7 at a time) seems more decent. Anyway that is I suppose beyond the scope.

thanks,

DD

Mottie commented

Instead of using javascript, maybe css would work better. This code and demo is from issue #38.

.mb-panel {
    opacity: 0.5;
    filter: alpha(opacity=50);   
}
.mb-panel.current {
    opacity: 1;
    filter: alpha(opacity=100);
}

I haven't gotten around to updating MovingBoxes with a navigation size option, like there is in AnythingSlider (see the second demo). I'm so overloaded with work that I don't know when I'd have time for this.

deeptish commented

I have already adopted css opacity tweaking.

The second demo as you referred looks what I intended on the navigation part. Unless some similar approach is adopted it will not be adored as other professional sliders. I understand you are busy in maintaining many products. Moving box was a different one, a breather in the whole lot of available sliders and hopefully you would have it enhanced someday soon.

Bye

DD