YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar theoutsiders asked

Widgetkit 2 - Slideshow "Flickers" on load - Bug or...

Hi,

Latest all software ;-)
Slideshow flickers on load, every site I use it on. For example
http://donatellopiras.testflight.website/english/chairman-speaker
My first guess was something with the canvas approach of widgetkit or some rendering/JS not working optimal, but I am not an expert.

It looks like it needs to load/fetch/process/calculate... something... all images first and then display, causing the html to render with a delay and pushing itself in position... or so.
I would expect that the first image loads instant, regardless of how many slides are available or at least make space for itself.

It doesn't flicker if you set it to full screen height... :-)

Anyway to prevent this flickering from happening? Or some site configuration things besides Widgetkit perhaps? I have one site it takes about 1 second before the slideshow is loaded so I set a height to the div wrapper to make the space render, even though it's empty until the slideshow is ready to show itself but doing this I prevent it from pushing content someone is reading downwards. But this is not a really nice solution :D

Kind regards,

  • Widgetkit
  • UIkit

Edited

15 Answers

1

Avatar pixelstext answered

Same issue here, when choosing other menu item of refreshing page there is a flickering and in a split of a second the main body content is seen.
Not only with Widgetkit, but also with JS-flexslider and at all my sites
In all browsers, also using glassfiber internet and not shared hosting, but VPS.

Have a look here:
site 1
site 2

This was my question on this issue

Edited

1

Avatar remco.nijssen answered

Add this line to your css and it will fix this problem:

ul.uk-slideshow li {    
  -webkit-transition: none !important;    
  transition: none !important;    
}

Edited

0

Avatar michael.anlauf Support answered

Maybe nobody sees any flickering? :-) Try using the path this way

media/widgetkit/donatello-1-5744519cf63559359fa51e1feeb6ad1c.jpg

Regards, Michael tucfoto

Edited

0

Avatar theoutsiders answered

Hi Michael,

What do you mean with try using the path lik

media/widgetkit/donatello-1-5744519cf63559359fa51e1feeb6ad1c.jpg

This is the url to the images in the slide. What it generates below also looks normal:

<li style="min-height: 350px; height: 350px;" aria-hidden="false" class="uk-active"><div class="uk-cover-background uk-position-cover" style="background-image: url("/media/widgetkit/donatello-1-5744519cf63559359fa51e1feeb6ad1c.jpg";);"></div>  
   <canvas width="1200" height="350" style="width: 100%; height: auto; opacity: 0;"></canvas>  
</li>

Flicker is here as well http://yootheme.com/demo/themes/joomla/2016/edge/index.php
Well.. all the demo's have it.

So I think I can't do anything about it but change to another slideshow script that loads different or preloades.

Thanks for you answering by the way :)

0

Avatar michael.anlauf Support answered

What browser you are using? If there would be a flickering more people would post about it.

Edited

0

Avatar theoutsiders answered

Chrome, safari and firefox on glassviber internet and mac pro retina 2015. So internet and computer should be able to manage it.

http://yootheme.com/demo/themes/joomla/2016/edge/index.php has it in al browsers.

I think in that case it is because the image is a cover image and needs to wait until it knows what to do and then repositions itself... think nothing that can be done without hacking the way widgetkit/uikit works.

I have it on all computers I look at it at our office (windows as well). So maybe people expect a real hard flickering or don't care about the small delay; I see it because I noticed it and now I can't not see it :D

Movie with what is see..

0

Avatar michael.anlauf Support answered

Well, in that case it would be more related to the server response time and how fast they manage the php requests, which in case of Yootheme is not so fast. Doesn't matter how fast your internet connection is, when the host doesn't provide the data fast enough.
Can you try my own site (not so fast host :-() and this one (fast host).
Sorry, didn't saw your post ozelot. Well then hope for some uikit improvement. Until today i never realized it and i created a lot of sites with Yootheme and all kind of widgets.
Sure with some bugs from time to time, but that's a other theme.

Edited

0

Avatar ozelot answered

Can you try my own site (not so fast host :-() and this one (fast host). <

Both homepage fullscreen slideshows are flickering on Chrome/Mac, when the browser window is wide enough. (?)
Yes, hoping for some soon widgetkit update solution ...

0

Avatar ozelot answered

Hello,
I'm urgently looking for a solution of the flickering problem.

Perhaps anybody can recommend some alternative wordpress plugin/s to run a fullscreen slideshow without flickering?
Many thanks for your help!

regards
IK

0

Avatar erwin.de.roo answered

I had the same problem, found a solution by using Slideset which does not show the flickering.

0

Avatar steve99 answered

same problem as pixelstext. Very similar to his site 1 example. My slideshow in top-a position (every page) has a slight load delay of initial image. So when you go from page to page the loading of content is pushed down each time by the delayed slideshow image load. This primarily happens in Chrome browser, it's not noticeable in Firefox (verified on Windows and Linux versions).

Also, I am using Master 2 (latest Warp, 7.3.28) theme on Joomla 3.6.2.

I am hoping the Uikit fix will get into a new Warp release?

0

Avatar oystein.thune answered

Thanks to Remco.Nijssen. That solution solved the problem. Great work!!!

-2

Avatar theoutsiders answered

Okay, a new widgetkit and UIkit are coming, perhaps they will do this part different. It is not the end of the world, but would be nice :)

Know someone who can answer? Share a link to this question via email or twitter.