Skip to content

[NODEBB] Wallpapers BUG on Firefox Mobile ?

Solved Customisation
Posts 9 Posters 2 Views 1.1k Watching 1
  • Hello @phenomlab

    My wallpapers works great on Chrome, Vivaldi, Brave on mobile but no on firefox.
    If I don’t scroll the page, wallpaper is OK. If i scroll on a category with lot of topics, i have a black color at the bottom of the sreeen after the wallpeper.

    ONLY on FIREFOX

    I have this code :

    /* Smartphone */
    @media (min-width: 320px) {
    body {
    background: url(https://domain.com/assets/customcss/backgrounds/default/default_01.png) no-repeat center center fixed; /*Background01*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: transparent !important;
    }
    }

    -moz-background-size: cover is declared for Gecho but I have this :

    d9b8067c-4943-47e7-83b7-73406fcc4524-image.png

    Thanks 😉

  • @phenomlab

    I have fixed the bug with a body: after like this :

    /* Smartphone */
    @media (min-width: 320px) {
    body {
    background: url(https://XXXX.XXX/assets/customcss/backgrounds/default/default_01.png) no-repeat center center scroll; /*Background01*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: transparent !important;
    }
    body:after{
    content:"";
    position:fixed; /* stretch a fixed position to the whole screen */
    top:0;
    height:100vh; /* fix for mobile browser address bar appearing disappearing */
    left:0;
    right:0;
    z-index:-1; /* needed to keep in the background */
    background: url(https://XXXX.XXXX/assets/customcss/backgrounds/default/default_01.png) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: transparent !important;
    }
    }

    But I don’t know if this is a good solution.

    What do you think ?

    Could it be simpler than that?

  • @phenomlab

    I have fixed the bug with a body: after like this :

    /* Smartphone */
    @media (min-width: 320px) {
            body {
            background: url(https://XXXX.XXX/assets/customcss/backgrounds/default/default_01.png) no-repeat center center scroll; /*Background01*/
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-color: transparent !important; 
        }
        
        body:after{
          content:"";
          position:fixed; /* stretch a fixed position to the whole screen */
          top:0;
          height:100vh; /* fix for mobile browser address bar appearing disappearing */
          left:0;
          right:0;
          z-index:-1; /* needed to keep in the background */
          background: url(https://XXXX.XXXX/assets/customcss/backgrounds/default/default_01.png) center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-color: transparent !important; 
    }  
    }
    

    But I don’t know if this is a good solution.

    What do you think ?

    Could it be simpler than that?

    @downpw This looks extremely complex. I think you should be looking at background-repeat - see https://www.w3schools.com/CSSref/pr_background-repeat.asp

  • I will test soon and let you know if it’s ok

    like this ?

    /* Smartphone */
    @media (min-width: 320px) {
    body {
    background-image: url(https://XXXX.XXX/assets/customcss/backgrounds/default/default_01.png)
    background-repeat: repeat-y
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: transparent !important;
    }
    }
  • I will test soon and let you know if it’s ok

    like this ?

    /* Smartphone */
    @media (min-width: 320px) {
            body {
            background-image: url(https://XXXX.XXX/assets/customcss/backgrounds/default/default_01.png) 
            background-repeat: repeat-y
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-color: transparent !important; 
        }
    }
    

    @downpw yes, that should work, but you probably need to experiment to get the best results.

  • @phenomlab

    Thats works but It’s really not very pretty 😞

    The code I have find on the web is complex, but it do the job perfectly.

    The result is exactly the same on Chrome based browsers and Firefox Mobile.
    and that’s what I’m looking for because I have a lot of FF users on mobile.

    I don’t understand why Firefox Mobile doesn’t interpret this code the same way.

    It is very frustrating 😞

    If you have better for the same result, I’m a taker of course 🙂

  • @phenomlab

    Thats works but It’s really not very pretty 😞

    The code I have find on the web is complex, but it do the job perfectly.

    The result is exactly the same on Chrome based browsers and Firefox Mobile.
    and that’s what I’m looking for because I have a lot of FF users on mobile.

    I don’t understand why Firefox Mobile doesn’t interpret this code the same way.

    It is very frustrating 😞

    If you have better for the same result, I’m a taker of course 🙂

    @downpw this is very odd. Firefox uses the Gecko engine and Chrome uses WebKit. They aren’t too far apart in terms of standards, so it should be the same across browsers.

  • the code which is complex does the job.

    He remove the black bar without repeating the wallpaper.

    I had trouble finding this code.

    A lot of people have the same problem apparently under Firefox Mobile app. On firefox desktop app, it’s OK.

    This is really a specificity of the mobile version.
    Maybe on the renderer.

  • the code which is complex does the job.

    He remove the black bar without repeating the wallpaper.

    I had trouble finding this code.

    A lot of people have the same problem apparently under Firefox Mobile app. On firefox desktop app, it’s OK.

    This is really a specificity of the mobile version.
    Maybe on the renderer.

    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)

  • undefined phenomlab has marked this topic as solved on 19 Jan 2022, 13:32


2/9

18 Jan 2022, 00:13


Threaded Replies

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • SEO and Nodebb

    Performance nodebb seo 4 Jul 2023, 09:11
    2 Votes
    2 Posts
    400 Views
    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1 However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365 And also https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164 It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”. Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.
  • 7 Votes
    18 Posts
    1k Views
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • restarting nodebb on boot

    Unsolved Configure nodebb 18 Dec 2022, 19:48
    1 Votes
    3 Posts
    476 Views
    @eeeee said in restarting nodebb on boot: can I just run nodebb under nodemon for auto restarts? It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.
  • Custom badges

    Solved Customisation nodebb 16 Nov 2022, 16:56
    2
    49 Votes
    103 Posts
    13k Views
  • 3 Votes
    2 Posts
    336 Views
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • 10 Votes
    16 Posts
    2k Views
    @crazycells said in creating topic specific widgets: Additionally if hide class exists, why are we re-defining it? We’re not 🤭 I misspelled it - it should be hidden
  • 13 Votes
    20 Posts
    3k Views
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • NodeBB Footer

    Solved Customisation footer nodebb 6 Jan 2022, 12:20
    1 Votes
    10 Posts
    1k Views
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal