Move backdrop-filter to a pseudo-element. Fix #133

robinparisi · Nov 9, 2019 · 21e333c · 21e333c
1 parent 5dfd2fc
commit 21e333c
Show file tree

Hide file tree

Showing 8 changed files with 364 additions and 375 deletions.
diff --git a/.csscomb.json b/.csscomb.json
@@ -191,6 +191,7 @@
  "-webkit-filter",
  "-ms-filter",
  "filter",
+ "backdrop-filter",
  "resize",
  "user-select",
  "cursor",

diff --git a/dist/tingle.css b/dist/tingle.css
@@ -248,16 +248,15 @@
 }
 
 @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
- .tingle-modal {
- -webkit-backdrop-filter: blur(20px);
- backdrop-filter: blur(20px);
- }
-
- @media (max-width : 540px) {
- .tingle-modal {
- -webkit-backdrop-filter: blur(8px);
- backdrop-filter: blur(8px);
- }
+ .tingle-modal:before {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ content: "";
+ -webkit-backdrop-filter: blur(18px);
+ backdrop-filter: blur(18px);
  }
 
  .tingle-enabled .tingle-content-wrapper {

diff --git a/dist/tingle.min.css b/dist/tingle.min.css
diff --git a/doc/tingle/tingle.css b/doc/tingle/tingle.css
@@ -13,19 +13,15 @@
  bottom: 0;
  left: 0;
  z-index: 1000;
- display: -ms-flexbox;
  display: flex;
  visibility: hidden;
- -ms-flex-direction: column;
  flex-direction: column;
- -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  -webkit-user-select: none;
- -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
@@ -77,7 +73,6 @@
 
 .tingle-modal-box {
  position: relative;
- -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
@@ -253,16 +248,15 @@
 }
 
 @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
- .tingle-modal {
- -webkit-backdrop-filter: blur(20px);
- backdrop-filter: blur(20px);
- }
-
- @media (max-width : 540px) {
- .tingle-modal {
- -webkit-backdrop-filter: blur(8px);
- backdrop-filter: blur(8px);
- }
+ .tingle-modal:before {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ content: "";
+ -webkit-backdrop-filter: blur(18px);
+ backdrop-filter: blur(18px);
  }
 
  .tingle-enabled .tingle-content-wrapper {