gagarine / no-transition Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 5.0 27 KB

Disable all the shiny and inappropriate animations made with CSS3 on your browser.

Home Page: https://addons.mozilla.org/en-US/firefox/addon/no-transition/

JavaScript 100.00%

firefox-extension webextension

no-transition's People

Contributors

Stargazers

Watchers

Forkers

yfdyh000 happy-ferret 0xrustlang dsloqw4567 minilistra

no-transition's Issues

Plugin results in scrolling issues

On various sites this plugin will cause scrolling issues. Some examples:

https://soundcloud.com/freshlysqueezed/tune-in-crew-bangalore-swing
Scrolling down to the track description and hovering over @Tuneincrew will result in the page automatically scrolling back to the top. The normal behavior is for a css info box to be displayed.
https://www.deezer.com/us/playlist/5233848602
Scrolling to the bottom of the page immediately triggers the page to scroll up again (though not to the top) so it's impossible to see the bottom of the page. I see the same behavior on discordapp.com (no direct link since it requires login) within the channel sidebar.

Animation paused by No Transition causes flickering at Lifehacker, Twitter and some other sites

https://lifehacker.com/our-favorite-features-in-the-new-firefox-70-browser-1839290547 screen recording – watch the bottom right area after the page is reloaded:

I guess that the same (or similar) might be encountered at some other G/O Media sites.

Is there any easy way to avoid this peculiarity?

If it's out of scope for the extension, please close this issue.

Spelling: Annimations -> Animations

Just a minor thing, please change "Annimations" to "Animations" (appears when hovering over addon icon, and also within GitHub.)

animations in ::before and ::after are not blocked

I've seen some websites that put a "loading" animation in the ::before pseudo element. The addon doesn't block those. It should match: *, *::before, *::after {...

Here's an example of an animation that isn't blocked:

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<style>
div::before {
	font-family: "Material Icons";
	content:"refresh";
	position:absolute; left:100px; top:100px;
	font-size:3em;
	animation:rotate 2s infinite linear;
}

@keyframes rotate{
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

</style>
</head>
<body>

<div>Example of animation in a ::before pseudo element:</div>

</body>
</html>

Use browser.webNavigation.onCommitted

See https://discourse.mozilla-community.org/t/inject-css-with-webextension/16877/4

Error: Missing host permission for the tab, and any iframes

I see this error message appear in Firefox console with regard to No-Transition:

Error: Missing host permission for the tab, and any iframes

Why it's been removed from Firefox addons catalogue?

Why it's been removed from Firefox addons catalogue? I used this addon mainly for getting rid of the idiotic recaptcha fading. Just reinstalled my FF but couldn't find this important helper. Thank you!

Confusing icon

Great extension.

The toggle icon is somewhat confusing: Does a play icon mean that it is enabled, or that I have to click to enable it (i.e. disabled)? Does pause mean that the extension is paused or that animations are paused?

Some annimations are still playing

The plugin kill almost all animation, but not all.

It seem browser.tabs.insertCSS(tab.id, { code: CSS, cssOrigin: 'user' }); doesn't works has documented. !important seem to not be taken into account.

We need to investigate a more reliable way to inject the CSS to avoid styles overwrite by the website.

See:

SVG Icone is a bit to small

The SVG browseraction icon has small margin that we need to remove:

DuckDuckGo results with overflowing URLs jitter upon hover

Steps to reproduce:

Enter some search terms at duckduckgo.com
Look for .result__body block elements where the URL is truncated (ending in "...")
Hover over the element
Watch as all other result body elements below appear to shift down by a short distance, then immediately shift back to their original position

I say "appear" because it happens so quickly that it's difficult to see precisely what happens. Nonetheless, the effect is jarring enough to be quite noticeable.

Further, I noticed that a similar effect sometimes occurs while using a mouse wheel to scroll rapidly back up the top of DuckDuckGo search results page, even while keeping the pointer clear of result body elements. It is easy to spot because the banner containing the search input field (that re-appears when the top of the page is reached) then also exhibits the same behaviour as described in step 4.

Blacklist / whitelist function

This is a good addon to help stop useless and distracting animations that slow down the computer and waste power and battery life. Thanks!

But some sites really need the animations to work. So it would be great to have a blacklist/whitelist function. It might be nice if it could integrate with the "Permissions" available through "Page Info" in Firefox, though I don't know if that's possible.

No Transition breaks GitHub Gist

I'm currently on No Transition 1.1.8 and, unless I turn it off, attempting to scroll too far down a document in GitHub Gist's code editor causes the editor to stop updating and trigger Firefox's prompt about the page slowing down the browser which asks whether I want to kill it.

I've tried waiting over a minute and the content process just keeps spinning away at 100% of a single core.

Toggling No Transition off fixes the problem.

Not compatible with Firefox ESR 52.2.1

This morning I tried the extension on my Firefox ESR 52.2.1 on XP and doesn't work (tested on links found on your AMO addon page).
On Firefox 55 beta works fine.
Maybe you must correct the minimum version compatibility.

Page scrolling behaviour (motion)

Mozilla bug 1486332 - Allow users to override page scrolling behaviour (motion)

web.telegram.org

Not sure what all of this is...

--transition-standard-easing: cubic-bezier(.4,.0,.2,1);

--transition-standard-in-time: .3s;

--transition-standard-out-time: .25s;

--transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);

--transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);

--pm-transition: .2s ease-in-out;

--layer-transition: .2s cubic-bezier(.4,.0,.2,1);

--slide-header-transition: .4s ease-in-out;

--tabs-transition: .25s ease-in-out;

--btn-menu-transition: .2s cubic-bezier(.4,0,.2,1);

--esg-transition: var(--btn-menu-transition);

--popup-transition-function: cubic-bezier(.4,0,.2,1);

--popup-transition-time: .15s;

--btn-corner-transition: .2s cubic-bezier(.34,1.56,.64,1);

--chatlist-badge-transition-in: .2s cubic-bezier(.35,.35,.47,1);

--chatlist-badge-transition-out: .2s cubic-bezier(.35,.35,.7,1);

--bubble-transition-in: transform var(--transition-standard-in),opacity var(--transition-standard-in);

--bubble-transition-out: transform var(--transition-standard-out),opacity var(--transition-standard-out);

--transition-standard-easing: cubic-bezier(.4,.0,.2,1);

--transition-standard-in-time: .3s;

--transition-standard-out-time: .25s;

--transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);

--transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);

--pm-transition: .2s ease-in-out;

--layer-transition: .2s cubic-bezier(.4,.0,.2,1);

--slide-header-transition: .4s ease-in-out;

--tabs-transition: .25s ease-in-out;

--btn-menu-transition: .2s cubic-bezier(.4,0,.2,1);

--esg-transition: var(--btn-menu-transition);

--popup-transition-function: cubic-bezier(.4,0,.2,1);

--popup-transition-time: .15s;

--btn-corner-transition: .2s cubic-bezier(.34,1.56,.64,1);

--chatlist-badge-transition-in: .2s cubic-bezier(.35,.35,.47,1);

--chatlist-badge-transition-out: .2s cubic-bezier(.35,.35,.7,1);

--bubble-transition-in: transform var(--transition-standard-in),opacity var(--transition-standard-in);

--bubble-transition-out: transform var(--transition-standard-out),opacity var(--transition-standard-out);

--transition-standard-easing: cubic-bezier(.4,.0,.2,1);

--transition-standard-in-time: .3s;

--transition-standard-out-time: .25s;

--transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);

--transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);

--pm-transition: .2s ease-in-out;

--layer-transition: .2s cubic-bezier(.4,.0,.2,1);

--slide-header-transition: .4s ease-in-out;

--tabs-transition: .25s ease-in-out;

--btn-menu-transition: .2s cubic-bezier(.4,0,.2,1);

--esg-transition: var(--btn-menu-transition);

--popup-transition-function: cubic-bezier(.4,0,.2,1);

--popup-transition-time: .15s;

--btn-corner-transition: .2s cubic-bezier(.34,1.56,.64,1);

--chatlist-badge-transition-in: .2s cubic-bezier(.35,.35,.47,1);

--chatlist-badge-transition-out: .2s cubic-bezier(.35,.35,.7,1);

--bubble-transition-in: transform var(--transition-standard-in),opacity var(--transition-standard-in);

--bubble-transition-out: transform var(--transition-standard-out),opacity var(--transition-standard-out);

--transition-standard-easing: cubic-bezier(.4,.0,.2,1);

--transition-standard-in-time: .3s;

--transition-standard-out-time: .25s;

--transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);

--transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);

--pm-transition: .2s ease-in-out;

--layer-transition: .2s cubic-bezier(.4,.0,.2,1);

--slide-header-transition: .4s ease-in-out;

--tabs-transition: .25s ease-in-out;

--btn-menu-transition: .2s cubic-bezier(.4,0,.2,1);

--esg-transition: var(--btn-menu-transition);

--popup-transition-function: cubic-bezier(.4,0,.2,1);

--popup-transition-time: .15s;

--btn-corner-transition: .2s cubic-bezier(.34,1.56,.64,1);

--chatlist-badge-transition-in: .2s cubic-bezier(.35,.35,.47,1);

--chatlist-badge-transition-out: .2s cubic-bezier(.35,.35,.7,1);

--bubble-transition-in: transform var(--transition-standard-in),opacity var(--transition-standard-in);

--bubble-transition-out: transform var(--transition-standard-out),opacity var(--transition-standard-out);

Disable carousels auto play

Let's see if we can pause most of carousel / slider by default. User can still move from slide to slide using the carousel navigation. This features should be optional.

See https://addons.mozilla.org/en-US/firefox/addon/no-transition/reviews/895660

Nobody should use carousel: http://shouldiuseacarousel.com/

First, I need a list of top carousels plugin and popular website using them...

completely disabling animations can cause problems

The addon works by inserting these styles to disable animations:

 /*CSS transition*/
  transition: none !important;
  /*CSS animations*/
  animation: none !important;

I'm not an expert, but I've found it might be useful to consider some of these additional types:

/*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;

I'm not sure which of them may be necessary. There's some discussion about it here:
https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily/16575811#16575811

Also, sometimes completely disabling animations can cause problems. See:
https://www.reddit.com/r/firefox/comments/37hw8o/how_to_disable_all_animations/
Which suggests the alternative:

animation-delay: 0ms !important;
animation-duration: 0ms !important;
transition: none !important;

And these bookmarklets which offer a choice of killing or just pausing:
https://github.com/stephen322/cssanim-bookmarklet

SVG animations

SVG smil animations are still playing. Firefox has an image.animation_mode flag in the about:config that can be set from normal to none - maybe your addon could also make use on that? (might also affect gifs though, but maybe for some that's also desirable)
On the other hand, it's probably not possible to pause/continue these animations without page reload, and afaik with the flag we don't get the final state of the animations but they don't even start, so a custom solution might be required. Hm, hope it doesn't turn out to be too much work.
In general, your addon does a very good job disabling the animations already :)

Problem with google login

On https://accounts.google.com/signin/v2/ field stay in gray state.

Doesn't disable transitions in discord web version

When I installed this addon, nothing really changed.

Mismatched names for the extension

https://addons.mozilla.org/addon/no-transition/ names the extension:

Disable Transitions and Animations

The installed extension is named:

No Transition

Can you have just one name for the extension?

Thanks

Disable jQuery animations

Animations can be disabled by setting jQuery.fx.off to true

https://api.jquery.com/jquery.fx.off/

No transition breaks Google Sheets

With the extension enabled I'm not able to edit any cells in a Google sheet. Instead it automatically sends the keys to the function input.

Icon is invisible on dark toolbar

The No Transition icon is invisible on my dark toolbar. Could there be an option for an icon with different colors so it would appear on a dark toolbar?

Great add on, thanks!

Can you publish the xpi file here?

Can you publish the xpi file here for download?
Thank you!

Option to temporarily enable/disable per site or tab

Usually I leave CSS3 animation on, and temporarily disable it with this bookmarklet any time a web page causes a problem: https://github.com/stephen322/cssanim-bookmarklet

It works well if you stay on the same page and don't reload it. But it would be great to have the ability to disable animation in a tab, rather than the whole browser, and have it stay disabled until you close the tab.

For example, I can disable Javascript per-tab with Prefbar and it's "Javascript (tab)" button, or the Tab Permissions addon. I'd like to be able to do the same thing with CSS3 animations.

documentation needed

Despite the simplicity of the UI, it isn't obvious how it works.

When a "play" icon is shown, does it mean that animations are allowed to play, or does it mean that clicking it will switch it to allowing animations to play?
When a "pause" icon is shown, does it mean that animations are paused, or does it mean that clicking it will pause animations?

Is this compatible with Stylish?

Can this be used alongside the add-on called Stylish? Is there anyone here who's tried using them together and can confirm whether they both still work? If Stylish tries to use a theme that has animated transitions while No Transition is switched on, who wins? Do the animated transitions display or not? And if Stylish does override No Transition on pages it's enabled for, does No Transition still work correctly on pages that don't have a Stylish style selected?

No Transition is very good, I've been using it for a while now and while it doesn't catch everything it cuts down the disturbance vastly.

Not working in Waterfox 56.2.8

Hi,

I have a strobe sensitivity and visual motion sensitivity. I currently use Waterfox because I haven't been able to adequately block the Firefox Quantum throbbers, and because I lost my last usable Firefox installation in a Nightly accident.

I use a number of other tools to try to protect against animation, sticky elements, etc.

Sample Page: https://www.freepress.net/

If I mouse over any of the topic sections there (Net Neutrality, Future of Journalism, etc.) I get punched with animation as images move down and to the right:

One more thing to fix: "scroll-behavior : smooth" to "auto"

https://bugzilla.mozilla.org/show_bug.cgi?id=1507423#c5

Click on "Comment X"

Doc https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Button & State Indicator on Addons Manager Page ?

Would it be possible to have an Enable/Disable button and state indicator on the Addons Manager page itself ?

(for those who remove buttons from the main UI)

It`s a brilliant idea for an extension and only realised what it was that was annoying me after searching for a fix

Thanks !

[Req] Add option to enable/disable animations/transitions by default

Feature request:
Please add an option(or better Setting) to enable or disable animations/transitions by default.
A simple "enable/disable Anims by default" option on the addons settings page would be enough.

Background:
I need to use FF over RDP/VNC a lot. Your add-on is really great for that task because it speeds up may pages a lot. The only downgrade is that I always need to click "Disable" every time I run FF which is a little bit annoying over the time.

Many thanks in advance!