当前位置: 动力学知识库 > 问答 > 编程问答 >

popup - Jumpy transitions on Chrome and Safari using FullScreen API (or resize)

问题描述:

I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).

I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.

For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:

Screenshot of transition happening

I have added the following code and it worked for the first section, but not to the second section...:

html:not(.ios) .fp-section.active {

height: 100vh !important;

}

html:not(.ios) .fp-section.active .fp-tableCell {

height: 100vh !important;

}

On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!

On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?

My FullPage settings:

 $('#fullpage').fullpage({

// Navigation

slideNavigation: false,

// Scrolling

easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc

scrollingSpeed: 500,

scrollOverflow: true,

// Design

controlArrows: false,

// Events

afterLoad: function(anchorLink, index) { // after changing section

if (index == 1){

// Load scrollDown link so that you don't have to load it afterwards

$('#main').load(scrollDown + ' .main-content', function(){

$.fn.fullpage.reBuild();

});

// Hide menu

if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {

$( '#site-navigation' ).removeClass('toggled');

$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );

$( '#site-navigation ul').attr( 'aria-expanded', 'false' );

}

}

colorInversion();

popupSlider();

},

afterRender: function() { // so that it applies to first section too

colorInversion();

popupSlider();

},

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide

//$.fn.fullpage.reBuild();

popupSlider();

}

});

My FlexSlider settings:

$('#popup-slider').flexslider({

animation: 'slide',

slideshow: false,

easing: 'easeInOutExpo',

animationSpeed: 0,

customDirectionNav: $(".flex-direction-nav a"),

// Usability features

video: true,

// Special Properties

manualControls: '.popup-slider-link',

// Callback API

start: function(slider){

$('.slides li *').click(function(event){

event.preventDefault();

slider.flexAnimate(slider.getTarget("next"));

});

},

after: function(){ // After each slider animation completes

flexslideColorInversion(); // Check for color inversion

$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500

},

});

(Flexslider is initialised inside the popupslider() function.)

Is there a way to "fix" these issues?

Thank you so much in advance to anyone who may be able to help me with this.


EDIT:

I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.

The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)

Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).

Cheers

分享给朋友:
您可能感兴趣的文章:
随机阅读: