Glide: Link inside slide are flickering

[webinpixels]

Hi

So, basically I use css3 transition in all <a> tags, to give nice effect on mouseover and other simple actions. I just noticed that after swipe (drag) the slider, all links inside slides are flickering. This is because the glide script is removing the "href" in all <a> tags on drag event and put it back when we release the drag. I can fix this by adding these lines in my CSS

    a:not([href]),
    a[href] {
        -webkit-transition: none !important;
        transition: none !important;
    }

yep, issues is fixed, but the "nice effect" on mouseover also disappear LOL

Any idea how to fix this without removing the transitions?

Many thanks!

[webinpixels]

Ok, already found a way.. :)

[MLDMoritz]

Ok, already found a way.. :)

Mind to share?

[powerbuoy]

@webinpixels Please share your solution. Having the same issue.

[powerbuoy]

Could we re-open this? It's really jarring when all the links blink.

[markmead]

Just had this issue. Using transition-property: none; has disabled the flickering, would be good to have an actual solution to this that doesn't require disabling transitions.

[rubenestevao]

I have this problem too, in google chrome (version 83.0.4103.116) an safari (version 13.1.1). I think it occurs because href is removed from anchor tags when dragging the slider.
Can someone explain to me why it is necessary remove the href from anchor tags? The e.preventDefault is not enough?

If the removal of href is not necessary, this pull request #502 fixes the problem.

[OneDoBit]

I don't know if this is still a problem for anyone, but here is a quick solution that GlideJS developers already implemented into their library

import Glide, { Anchors } from '@glidejs/glide'
new Glide('.glide').mount({ Anchors })

You can find full documentation here link

[powerbuoy]

Hmm I could be wrong but I believe the Anchors plug-in is used by default and is actually what's causing the blinking because it removes the link's href attribute during sliding.

[OneDoBit]

I am not sure if it is included by default in CDN, but in npm package it is not included by default. Also, this is what is telling the library that there are anchors inside the slider and is actually not removing href during slider.
I have tried this couple minutes ago and it worked perfectly for me.

[powerbuoy]

Yea it is: https://github.com/glidejs/glide/blob/e894ec359668df58a41568619d8ed33cc941916c/src/components/anchors.js#L97

[OneDoBit]

Yes, you are right, It is included right away with the library, sorry.
However, when I am reinitializing the Anchor component in my code, I am not using neither attach or detach function, so that stops removing href and adding the data-href attribute to my component, which causes the flicker to stop.

[powerbuoy]

Ok so yea disabling the Anchors component probably fixes it but introduces other problems like not being able to drag linked elements.

[OneDoBit]

Do you mean being able to drag by the anchors? That is not actually a problem in my case.
Tbh, I also thought I would have some problems like that, but no, clicking also works as intended.
I am using NuxtJS and I am not really sure about other frameworks.

[ldrummond]

This works for me - only turns off transitions during the window for repainting after slide change (the duration to wait is an arbitrary length to cover the time of repaint that triggers the color change)

// css
.no-trans {
  transition: none !important;
}

// js
const carousel = document.querySelector(".carousel");
const anchors  = Array.from(carousel.querySelectorAll("a"));
let transition_timeout; 
new Glide(carousel, {...})
      .on("swipe.end", () => {
        clearTimeout(transition_timeout);
        anchors.forEach(anchor => anchor.classList.add("no-trans"));
        transition_timeout = setTimeout(_ => {
          anchors.forEach(anchor => anchor.classList.remove("no-trans"));
        }, 666);
      })
      .mount();