I have a website (http://file-new.com/client/vequity5/). The whole website is in the jQuery Malsup's Cycle2 plugin. Everything seems to be working fine and as expected except one little thing. When you click on the last page (contact) the slide transition has a little white flash. It's more pronounced in safari that any other browser but it's still visible almost any browser. My observation of the effect are leading me to the conclusion that it has to do something with the synchronization of the animation of the slides.
Any advice/thought will be much appreciated.
Related
Bootstrap 4.1.x Carousel
The new Bootstrap 4.1.x carousel can be found here: http://getbootstrap.com/docs/4.1/components/carousel/
NOTE: This issue only exists in Edge
Description
If you are in the new Microsoft Edge browser, it's very subtle, but I have noticed that there is a small hitch at the end of the animation when the image is finished sliding.
To be specific: When the animation is finished, the image "flashes" a distance (sometimes 5% of the width of the slide, sometimes 5 pixels, sometimes 10 pixels) to the right from where it "lands," subsequently "sliding" back to where it "landed."
It doesn't happen all the time. I assume it just happens at random, but it's something that has grown to annoy me.
If anyone is able to tell me why there is a hitch at the end of the animation, I would be more than pleased to fix it on my new website.
I'm using a CDN. Here is a list of the uncompressed versions of my dependencies and their source code, respectively:
JS
https://code.jquery.com/jquery-3.2.1.js
http://code.jquery.com/ui/1.12.1/jquery-ui.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.js
CSS
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.css
https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css
TLDR:
If you happen to know how to get rid of the little hitch on the Bootstrap 4 Carousel animation in Edge, I would love to know how to get rid of it.
I'm developing a website that heavily uses FullpageJS:
http://dev.oxplore.surge.online/
On the very first section, I've got a horizontal scrolling section with six slides. I can scroll between them all the way to the last-but-one slide. After that, the plugin loops back to the first slide, despite loopHorizontal being set to false.
The issue is most likely caused by a problem in my own CSS/JS, since making a from-scratch demo of Fullpage horizontal scrolling works fine. But I can't figure out what's interfering, so I thought I'd ask here for help.
*Note: a lot of JS re-arrangement of the page structure happens before Fullpage is called. However, the HTML is definitely in the right structure when Fullpage is called, so it should work.
*Note: the site is developed on a Drupal back-end (not my choice), but that shouldn't be affecting the plugin.
Steps to reproduce it
Scroll horizontally through the slides in the first section
After reaching slide 5, press right-arrow again.
Instead of advancing to slide 6, we loop back to slide 1 again.
Versions
Chrome, Firefox, IE, Mobile, etc
Testing this current project I'm working on (http://hp1.icorp.net/datatv/mwc/index.html) and it's fine on desktop but on my iPhone 6, the page loads but I can't seem to swipe downwards for more content. I'm wondering if it's because I'm using the Skrollr JS scripts to add parallax and other animated effects to the site.
The good news is that the navigation does work, so it does point down to the right portions of my one pager, but because there are animation opacity effects added, I can't see my content without swiping.
Never mind. I found out to make it work on iOS, you have to add another div or section tag with the class of 'skrollr-body' to make that work. Sneaky!
Thanks in advance for any help.
I'm currently using a nice animated GIF that i designed as the header logo for my site. This was working until I put in a vertical scrolling gallery.
When the gallery starts to scroll (2 seconds after the page loads) the GIF freezes and doesnt continue until the gallery is paused. The gallery works on a setInterval function and moves the images in the scroller a fraction each interval.
I've read that this is a documented problem with IE8 and has been fixed for IE9 (which works fine - and yes, I have tested it in IE9, unfortunately it has shaken my foundation of hating IE as it works quite nicely).
Anyway, has anyone got any ideas for a work around to get the GIF to animate at the same time as the gallery in IE8? I've tried an Iframe and preloading the image. However, if you want to suggest those ideas it would be good to see if i tried to do them correctly.
Thanks
This would be tough to do since JavaScript is singlethreaded. The Gif animation consumes that single thread. So you cannot render a page and animate a gif at the same time.
Here is my site: http://www.dreamweddinggroup.com/redesign and I'm having a hell of a tough time figuring out why in gods name my fadeIn, fadeOut and corner() functions won't work in IE8. They were working for a time, but now they have broken and I can't for the life of me figure it out. Can anybody see anything that would cause the problem here?
To see what I'm talking about, if you were to click on the "About Us" link at the bottom of the page, you should see the text fade in. Then if you were to click on "Why Dream Wedding Group", the "About Us" text should fade out, and when it fades back in, you would see the new text.
Hey I was having the same trouble. I was trying to fadeOut an IE image and fade something new in like so :
$(".edit_photo_link").click(function(){
$(this).fadeOut("slow", function(){
$(this).next(".throb").fadeIn("slow");
});
});
Which wasn't working. But the FadeIn was! So guessing that this was processor getting eaten up by IE8 (not IE7), I just changed it to this :
$(".edit_photo_link").click(function(){
$(this).fadeOut("slow", function(){
$(this).hide();
$(this).next(".throb").fadeIn("slow");
});
});
And IE8 users don't get that extra loving of animation.
I had similar problems with a stack of absolutely positioned divs. I wanted to simultaneously fade one out and fade one in. Code that worked fine in FF/Safari would not work in IE8: The fadeOut() wouldnt fade, only the fadeIn().
I found solution was to use CSS to set the z-index of the element to be faded-in to be at the top of the stack:
$('#fadeoutdiv').css({zIndex:90}).fadeOut(2000);
$('#fadeindiv').css({zIndex:99}).fadeIn(2000);
I'm finding that IE8 has terrible performance using fadeIn myself with just a small image or text area. I think the engine is basically very bad at alpha blending! Because you're trying to fade fullscreen images, the performance is so slow that you just don't see the fade. In my case, I'm seeing CPU usage rocket to between 50% and 100% even on fairly powerful desktop with a decent graphics card. My client is having problems because every time this fade happens (every 5 seconds or so), video that is also playing starts skipping and being generally unstable.
Another site I'm working on is http://www.urstreams.com , if you hover over the boxes you will see a description appear also using fadeIn. If you mouse over all the boxes at once, so all the descriptions are appearing and disappearing at the same time, all the animations grind to a halt and CPU again rockets skyward.
Bit of a nightmare really, but at this stage I would recommend against any alpha blending animation in IE. The common theme in all these cases seems to be that blending is occurring over images. Perhaps this is the problem, as common jQuery samples and possibly tests / benchmarks tend to focus on basic scenarios such as plain text appearing over plain background tests?
I too have noticed this phenomenon with IE 8, though it seems to occur no matter what my element is floating above. I had an empty 4x4 px DIV that i was fading in and out on an interval (interval at 400ms, then element.fadeIn(100).fadeOut(500)) to debug element positioning and it was completely obliterating one of my cores! It took me a while to figure out why IE was constantly hitting 50% CPU while Chrome and Firefox barely broke a sweat -- I figured I had a rogue greedy loop somewhere until I scanned across my interval.
Fire up IE and your task manager and head over to http://www.hv-designs.co.uk/tutorials/jquery/all.html for a little test. Sort your running processes by CPU desc and watch IE rise to the top on every test (20-40+% of my 1.2 GHz dual-core Intel SU2300 for the duration of the fade +/- a few hundred ms), even for the simple text paragraph! Running the same test in Firefox or Chrome doesn't even break 10% usage for me.