Fix logo gradient not working on some Safari and Blink-based browsers (#18634)

Works around https://bugs.chromium.org/p/chromium/issues/detail?id=258029

diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 391f1fad9e25b2969fa75099be886369545c2980..413a1cdd6ada229cddb2d9c8d18cc3c72fbef021 100644 (file)
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -256,7 +256,17 @@ button {
 }
 
 .logo-resources {
-  display: none;
+  // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
+  visibility: hidden;
+  user-select: none;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1000;
 }
 
 // NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 24e71ff9d06e87a1fb742a249371f86e9b8e7a81..ee444c070f783103447d25fbc724a8363deefbec 100755 (executable)
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -49,6 +49,6 @@
   %body{ class: body_classes }
     = content_for?(:content) ? yield(:content) : yield
 
-    .logo-resources
+    .logo-resources{ 'tabindex' => '-1', 'inert' => true, 'aria-hidden' => true }
       = render_symbol :icon
       = render_symbol :wordmark

diff --git a/app/views/layouts/embedded.html.haml b/app/views/layouts/embedded.html.haml
index 5bd50cdd85730eb2360c9c91c138cd3c4ea89f13..b8817d56623ff75da445f8a4031ee6a0db518cfe 100644 (file)
--- a/app/views/layouts/embedded.html.haml
+++ b/app/views/layouts/embedded.html.haml
@@ -24,5 +24,5 @@
   %body.embed
     = yield
 
-    .logo-resources
+    .logo-resources{ 'tabindex' => '-1', 'inert' => true, 'aria-hidden' => true }
       = render_symbol :icon