Flickering of `<a>` (link) element with `transition: all` #724

sakkamade · 2021-08-15T23:17:21Z

Active Rikaichamp (however it's named now) causes a flickering transition of <a> html-tag.

Tested on Firefox 91.0 (64-bit)
Rikaichamp 1.2.1 (Although was experiencing this for quite a while—month since I noticed? Had no idea that this add-on is at fault.)
Arch Linux.

Test document

<!DOCTYPE html>
<html>
<head>
<style>
.test {
    border: 1px solid #ddd;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.test:hover {
    border-color: #000;
}
</style>
</head>
<body>

<a class="test" href="#">This is a link.</a>

</body>
</html>

P.s. transition: border-color solves it.

The text was updated successfully, but these errors were encountered:

sakkamade · 2021-08-15T23:24:12Z

for quite a while

I've noted it on July 13th, if this will be of any help.

birtles · 2021-08-15T23:50:28Z

This is quite odd yet #723 appears to report the same thing. I think what's happening is 10ten's mousemove handling is flushing style.

birtles · 2021-08-15T23:56:28Z

I still need to dig into this further, but at a quick glance, it looks like 10ten does indeed flush style in its mousemove handling. However, as far as I can tell, it has been doing that for years. I wonder if something changed in the user agent stylesheet for Arch Linux that simply makes it more noticeable now.

sakkamade · 2021-08-16T00:28:01Z

This has nothing to do with Arch Linux.

I have tested it now with Firefox 87.0 (64 bit) on Windows 10 (VirtualBox): exactly the same flickering.

birtles · 2021-08-16T00:48:05Z

Right, I can reproduce it on Windows too.

I'm just trying to make sense of the fact that I received two bug reports for roughly the same issue within hours of each other: one from an Arch Linux user and one from someone browsing the Arch Linux download page!

The good news is I can't reproduce on a commit on 1 Jan 2021 so I am currently bisecting the regression range. So far it looks like it goes back pretty far -- somewhere between the start of April and the end of May.

sakkamade · 2021-08-16T00:56:38Z

I'm just trying to make sense of the fact that I received two bug reports for roughly the same issue within hours of each other

Well, coincidence?

I have already said that

Although I was experiencing this for quite a while—month since I noticed? I had no idea that this add-on is at fault

EDIT: For what it is worth, Arch Linux is quite popular, even more so Arch Linux Wiki.

birtles · 2021-08-16T01:05:45Z

Unfortunately it looks like aa8209b is to blame.

That patch makes us toggle the pointer-events property of link elements so we can see if there is actually text underneath them. I guess it's applying that behaviour in this test case even when it needn't and probably needs to be a bit smarter.

Fixes #723 and #724.

birtles · 2021-08-16T04:11:22Z

Fixed by 1dead87

birtles · 2021-08-19T23:17:39Z

Version 1.2.2 was released yesterday so this should be fixed now.

sakkamade · 2021-08-20T03:11:57Z

@birtles, Thank you for notification!

Well, what can I say, it is better now.

The behaviour is still present on my side, for example, when I quickly move the cursor through such page:

Document Body

<body>
<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>

<a class="test" href="#">This is a link.</a><br>
</body>

birtles · 2021-08-20T04:35:34Z

@sakkamade Thank you for checking!

I'm having trouble noticing any difference with that test case between when the add-on is enabled vs when it is not.

I've confirmed that in that test case we're not triggering the "covering link" behavior so it must be a separate issue. If there's some more reliable means to reproduce it then I'd be glad to hear it!

sakkamade · 2021-08-20T20:03:15Z

If there's some more reliable means to reproduce it then I'd be glad to hear it!

I wonder if there are more reliable.

10ten.mp4

EDIT: Yes, it is interesting. It can be seen only when I move the cursor from the top to the bottom, and not when I move it from the bottom to the top.

EDIT2: And yes, it also works as expected when I move the cursor from the left to the right and from the right to the left.
So, for my side, I can reproduce it only by moving the cursor from the top to the bottom.

EDIT3: And I can reproduce it under Windows 10, Firefox 87.

sakkamade · 2021-08-23T22:10:39Z

@birtles, So can it be reopened, then?

birtles · 2021-08-24T01:28:00Z

Hi @sakkamade, I had a look at the new test case and it looks like those links are stacked so close together that they end up overlapping each other, triggering the "link uncovering" behavior that causes flicker. If you set line-height: 2 on the body, for example, so that they are no longer overlapping, the flicker will disappear. This also explains why it only happens going downwards and only when moving quickly (because they only overlap while the above element is transitioning).

I think the flicker is an unfortunate but necessary side effect of the (very useful) link uncovering behavior. It could be optimized further but I don't think it's worth it. Please let me know if there is specific content in the wild where this is causing problems and I'll be happy to look into it.

sakkamade · 2021-08-24T03:32:33Z

(...) it looks like those links are stacked so close together that they end up overlapping each other (...)

Right, this is certainly true, in this case,
but sadly, sometimes I still do see this behaviour in practice (sometimes one time in hundred hovers, sometimes two in ten), with links of visually proper margins (not overlapping).

I am unable to replicate the circumstances for reliable reproduction with original content, but I am mostly certain that it is caused by something similar to this:

HTML test

<!DOCTYPE html>
<html>
<head>
<style>
body { line-height: 60px; }

.test {
    border: 1px solid #ddd;
    transition: all 0.2s ease-in-out;
    padding: 10px;
    display: block;
}

.test:hover {
    border-color: #000;
    box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.test div { height: 40px; }
</style>
</head>
<body>

<a class="test" href="#" style="">
<div class="test2">
<p class="">test line</p>
<p class="">test overflown line</p>
</div>
</a>

</body>
</html>

Hovering the overflown <div> and not the <a> (link) is also a source of flicker.

What are your thoughts regarding this one?

birtles · 2021-08-24T03:38:50Z

Thanks for following up on this and providing a test case too! I'm more than happy to look into it when there's some real content that's significantly affected by it, but until then I'm afraid I'm not convinced it's worth spending time on. I'm happy to review a PR though if you'd like to look into it further.

sakkamade · 2021-08-24T03:45:25Z

real content that's significantly affected by it

So far I've seen none.

I'm happy to review a PR though if you'd like to look into it further.

No, this is as far as I will.

Oh well. Thank you.

birtles mentioned this issue Aug 15, 2021

Website layout is changed when the extension in enabled #723

Closed

This comment has been minimized.

Sign in to view

birtles added a commit that referenced this issue Aug 16, 2021

fix: Stop causing links with transitions to flicker

1dead87

Fixes #723 and #724.

birtles closed this as completed Aug 16, 2021

sakkamade changed the title ~~Flickering of <a> (link) tags with transition: all~~ Flickering of <a> (link) element with transition: all Aug 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flickering of `<a>` (link) element with `transition: all` #724

Flickering of `<a>` (link) element with `transition: all` #724

sakkamade commented Aug 15, 2021 •

edited

Loading

sakkamade commented Aug 15, 2021 •

edited

Loading

birtles commented Aug 15, 2021

birtles commented Aug 15, 2021

This comment has been minimized.

sakkamade commented Aug 16, 2021 •

edited

Loading

birtles commented Aug 16, 2021

sakkamade commented Aug 16, 2021 •

edited

Loading

birtles commented Aug 16, 2021

birtles commented Aug 16, 2021

birtles commented Aug 19, 2021

sakkamade commented Aug 20, 2021 •

edited

Loading

birtles commented Aug 20, 2021

sakkamade commented Aug 20, 2021 •

edited

Loading

sakkamade commented Aug 23, 2021

birtles commented Aug 24, 2021

sakkamade commented Aug 24, 2021 •

edited

Loading

birtles commented Aug 24, 2021

sakkamade commented Aug 24, 2021

Flickering of <a> (link) element with transition: all #724

Flickering of <a> (link) element with transition: all #724

Comments

sakkamade commented Aug 15, 2021 • edited Loading

sakkamade commented Aug 15, 2021 • edited Loading

birtles commented Aug 15, 2021

birtles commented Aug 15, 2021

This comment has been minimized.

sakkamade commented Aug 16, 2021 • edited Loading

birtles commented Aug 16, 2021

sakkamade commented Aug 16, 2021 • edited Loading

birtles commented Aug 16, 2021

birtles commented Aug 16, 2021

birtles commented Aug 19, 2021

sakkamade commented Aug 20, 2021 • edited Loading

birtles commented Aug 20, 2021

sakkamade commented Aug 20, 2021 • edited Loading

sakkamade commented Aug 23, 2021

birtles commented Aug 24, 2021

sakkamade commented Aug 24, 2021 • edited Loading

birtles commented Aug 24, 2021

sakkamade commented Aug 24, 2021

Flickering of `<a>` (link) element with `transition: all` #724

Flickering of `<a>` (link) element with `transition: all` #724

sakkamade commented Aug 15, 2021 •

edited

Loading

sakkamade commented Aug 15, 2021 •

edited

Loading

sakkamade commented Aug 16, 2021 •

edited

Loading

sakkamade commented Aug 16, 2021 •

edited

Loading

sakkamade commented Aug 20, 2021 •

edited

Loading

sakkamade commented Aug 20, 2021 •

edited

Loading

sakkamade commented Aug 24, 2021 •

edited

Loading