From 6b0628a7eefb1164f6bb2cb28980a9bae7b9ce7e Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 28 Feb 2018 05:04:35 +0300
Subject: [PATCH] CSS containment was buggy in Chrome before 58.0.3004

fixes #355
---
 manage/manage.css | 11 -----------
 manage/manage.js  | 27 ++++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index 7d97d477..305aac8d 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -325,17 +325,10 @@ select {
 
 .newUI .entry {
   display: table-row;
-  contain: strict;
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.newUI .entry.can-update,
-.newUI .entry.update-problem,
-.newUI .entry.update-done {
-  contain: none;
-}
-
 .newUI .entry.odd {
   background-color: rgba(128, 128, 128, 0.05);
 }
@@ -345,11 +338,9 @@ select {
   margin: 0;
   display: table-cell;
   vertical-align: middle;
-  contain: content;
 }
 
 .newUI .entry .actions {
-  contain: none;
   position: relative;
 }
 
@@ -626,7 +617,6 @@ select {
   box-sizing: border-box;
   padding-right: 1rem;
   line-height: 18px;
-  contain: layout style;
 }
 
 .newUI .applies-to .expander {
@@ -665,7 +655,6 @@ select {
   backface-visibility: hidden;
   opacity: .25;
   display: none;
-  contain: layout style size;
 }
 
 .newUI .has-favicons .target {
diff --git a/manage/manage.js b/manage/manage.js
index 85da3292..b8955b61 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -604,19 +604,40 @@ function switchUI({styleOnly} = {}) {
     .newUI .targets {
       max-height: ${newUI.targets * 18}px;
     }
-    ` + (newUI.faviconsGray ? `
+  ` + (newUI.faviconsGray ? `
     .newUI .target img {
       -webkit-filter: grayscale(1);
       filter: grayscale(1);
       opacity: .25;
     }
-    ` : `
+  ` : `
     .newUI .target img {
       -webkit-filter: none;
       filter: none;
       opacity: 1;
     }
-  `);
+  `) + (CHROME >= 3004 ? `
+    .newUI .entry {
+      contain: strict;
+    }
+    .newUI .entry > * {
+      contain: content;
+    }
+    .newUI .entry .actions {
+      contain: none;
+    }
+    .newUI .target {
+      contain: layout style;
+    }
+    .newUI .target img {
+      contain: layout style size;
+    }
+    .newUI .entry.can-update,
+    .newUI .entry.update-problem,
+    .newUI .entry.update-done {
+      contain: none;
+    }
+  ` : '');
 
   if (styleOnly) {
     return;