[openstreetmap/openstreetmap-website] Welcome box flickers (#1951)

[mmd]

Usually, the welcome box is shown for new users and should never appear again as soon as the welcome box gets closed (and a _osm_welcome cookie set). The way it is implemented now, the welcome box is always shown, and in case it should be closed, it gets closed about 100ms later. This leads to some annoying flickering on the screen.

Can we change this in a way so that the welcome box is always hidden, and only displayed if needed, i.e. turn around today's logic? 

<details>
<summary>Screencast (click to open)</summary>

![flicker](https://user-images.githubusercontent.com/5842757/44306876-093ab900-a398-11e8-9c4a-e683823b7bc1.gif)
</details>



I tried the following approach. However, it's not perfect for mobile, as show() gets immediately overruled by a `!important` css setting in small.scss, resulting again in some flickering :(

<details>

```javascript
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index ccf4e561c..64aae48bd 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -187,8 +187,8 @@ $(document).ready(function () {
     $.cookie('_osm_location', OSM.locationCookie(map), { expires: expiry, path: '/' });
   });
 
-  if ($.cookie('_osm_welcome') === 'hide') {
-    $('.welcome').hide();
+  if ($.cookie('_osm_welcome') !== 'hide') {
+     $('.welcome').show();
   }
 
   $('.welcome .close-wrap').on('click', function() {
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f9214b24d..dd4a70693 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -613,7 +613,7 @@ body.compact {
 
     #banner,
     .welcome {
-      display: block;
+        display: none;
     }
 
     #sidebar_content {

```

</details>

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/1951
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20180819/d0a5f22f/attachment.html>