search

Lartsch / FediAct

Chrome/Firefox extension that simplifies interactions on other Mastodon instances than your own.
MIT License
459 stars 15 forks source link

FediAct interferes with fade-in animations on non-Mastodon-instance sites #62

Closed wlonkly closed 1 year ago

wlonkly commented 1 year ago

This is continuing the issue in #42, but I've got a little more info now. Still happens in v0.9.8.5 and newer, fine before 0.9.8.5.

After that one was closed, I wrote there:

Unfortunately the problem is still happening in v0.9.8.7 in Worldle. The JSON error is gone now, but I guess that was a red herring, sorry!

I dug around a little bit more and I can't find the conflict between the site and this extension. One thing I did notice is that the images disappear the moment FediAct is enabled -- I don't have to reload for them to disappear.

The other thing I noticed is that if I disable opacity: 0 (from Worldle's .opacity-0 class in chunk.css) then the problem goes away. So for some reason, that opacity which is usually being overridden... somehow (probably during fade-in?) is still being applied when FediAct is enabled.

(Although I'm eyeing the @keyframes animations -- I don't have enough front-end skills to know if that would interfere though.)

And I just had a similar problem happen on an internal tool at work -- it does 

.fade {
  opacity: 0;
  animation: fadeIn 2s .2s 1 normal forwards ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; visibility: hidden; }
  50% { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}
}

and the page then never fades in.

I have a minimal test case available that reproduces the problem, although interestingly putting this HTML and CSS into JSFiddle doesn't reproduce it.

https://www.lafferty.ca/fediact.html https://www.lafferty.ca/fediact.css

wlonkly commented 1 year ago

(#61 might be related, I see improvmx.com has fade animations too.)

Lartsch commented 1 year ago

I think I know what the issue is. FediAct uses (invisible) CSS animation (events) to detect inserted elements. The stylesheet for this function is always injected and apparently can interfere with sites that use the opacity property in it's own animations, in one way or another

I'll look into this when I have some spare time again, right now I'm writing my thesis and time is rare, unfortunately.