Skip to content

[NODEBB] Wallpapers BUG on Firefox Mobile ?

Solved Customisation
  • 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?

  • @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; 
        }
    }
    
  • @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 🙂

  • @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.

  • @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 ?)

  • phenomlabundefined phenomlab has marked this topic as solved on

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💗

  • SEO and Nodebb

    Performance
    2
    2 Votes
    2 Posts
    136 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.

  • 1 Votes
    4 Posts
    470 Views

    @eeeee if you’re using the console, you could try

    node app.js > app.log 2>&1

    This would redirect stdout to a file named app.log and redirect stderr to stdout.

    I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log.

    Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.

  • 36 Votes
    55 Posts
    4k Views

    @DownPW I see why. The code relies on the existence of

    [component="topic/quickreply/container"]

    However, this by definition means that the below has to be enabled

    aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png

    It will then work

    7fb38631-e0f3-46ef-b652-00929d927b13-image.png

    For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.

    The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on 🙂

  • 1 Votes
    5 Posts
    535 Views

    @DownPW very useful tip. Thanks

  • 0 Votes
    6 Posts
    526 Views

    @cagatay You should ask in the NodeBB forums. Perhaps reference this post

    https://discuss.flarum.org/d/23066-who-read

  • NodeBB Theme/Skin Switcher

    Solved Customisation
    38
    7 Votes
    38 Posts
    2k Views

    @Teemberland great spot ! You should create a PR for that so they can include it in the official repository.

    Just be aware that any subsequent releases will overwrite your fix without the PR.

  • 3 Votes
    11 Posts
    686 Views

    @cagatay no problems

  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    510 Views

    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.