Advertisement
Guest User

avoid habit browser render bug

a guest
Dec 12th, 2019
1,122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ==UserScript==
  2. // @name avoid habit render bug
  3. // @description 本文途切れバグ回避のためフェードインCSS除去
  4. // @include http*://*
  5.  
  6. function removeFadeinAnimation() {
  7.     const rulesByAnimation = {};
  8.     const fadeinAnimationsSet = new Set();
  9.     const sheets = document.styleSheets;
  10.     // console.log(sheets);
  11.     function eachRules(rules) {
  12.         Array.from(rules).forEach(rule => {
  13.             const type = rule.type;
  14.             if (type === CSSRule.STYLE_RULE) {
  15.                 const animationValue =
  16.                     rule.style.animationName || rule.style.animation;
  17.                 if (animationValue) {
  18.                     const animationName = animationValue
  19.                         .split(" ")
  20.                         .slice(-1)[0];
  21.                     // console.log(animationName, cssText, i, j);
  22.                     if (rulesByAnimation[animationName] === undefined)
  23.                         rulesByAnimation[animationName] = [];
  24.                     rulesByAnimation[animationName].push(rule);
  25.                 }
  26.             } else if (type === CSSRule.KEYFRAMES_RULE) {
  27.                 // console.log(rule);
  28.                 const keyRules = rule.rules || rule.cssRules;
  29.                 const opacityKFs = Array.from(keyRules)
  30.                     .filter(
  31.                         rule =>
  32.                             rule.type === CSSRule.KEYFRAME_RULE &&
  33.                             rule.style.length === 1 &&
  34.                             rule.style[0] === "opacity"
  35.                     )
  36.                     .reduce((obj, rule) => {
  37.                         obj[rule.keyText] = rule.style.opacity;
  38.                         return obj;
  39.                     }, {});
  40.                 if (opacityKFs["0%"] === "0" && opacityKFs["100%"] === "1") {
  41.                     fadeinAnimationsSet.add(rule.name);
  42.                 }
  43.             } else if (type === CSSRule.MEDIA_RULE) {
  44.                 const rules = rule.rules || rule.cssRules;
  45.                 // console.log(rules);
  46.                 eachRules(rules);
  47.             }
  48.         });
  49.     }
  50.     Array.from(sheets).forEach(sheet => {
  51.         try {
  52.             const rules = sheet.rules || sheet.cssRules;
  53.             eachRules(rules);
  54.         } catch (error) {
  55.             console.log(error);
  56.         }
  57.     });
  58.     const fadeinAnimations = Array.from(fadeinAnimationsSet.values());
  59.     const fadeinRules = Object.keys(rulesByAnimation)
  60.         .filter(a => fadeinAnimations.includes(a))
  61.         .map(a => rulesByAnimation[a])
  62.         .reduce((arr, val) => arr.concat(val), []);
  63.     // console.log(fadeinRules, fadeinAnimations);
  64.  
  65.     // フェードインするアニメーションのCSSルールを除去
  66.     fadeinRules.forEach(fadeinRule => {
  67.         const rule = fadeinRule;
  68.         // console.log(rule);
  69.         rule.style.animation = "none";
  70.         rule.style.animationName = "none";
  71.         rule.style.cssText += "opacity: 1 !important;";
  72.     });
  73. }
  74.  
  75. window.addEventListener("load", removeFadeinAnimation);
  76. removeFadeinAnimation();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement