19 comments

  • Joshua TurnerJoshua Turner, 1 year ago

    This might be a little hack-ier, but I've always just used a 4 point linear gradient to accomplish this.

    background: linear-gradient(to bottom, #0000ff 0%,#0000ff 50%,#ff0000 50%,#ff0000 100%);
    2 points
    • Dimitri Nicolas, 1 year ago

      Yes, I tried this one but for me it only work on safari on macOs, not even on iOS. I may have been wrong : https://dimou.fr/gradient.html

      0 points
      • Joshua TurnerJoshua Turner, 1 year ago

        It looks like you need to set your html/body to height: 100%;. Also it looks like the gradient is reversed, blue is currently on top.

        EDIT: Hey, you're absolutely right. It looks like a lot of browsers don't show gradients on overflow if they're set as the background, and just default to white. iOS does, which is where I've done this in the past.

        0 points
        • Dimitri Nicolas, 1 year ago

          Thanks, just fixed it online. But the overflow colors still don't show up on iOS safari or Chrome macOs, I really don't know why but I think some browsers doesn't consider the "overflow color" when it is a background-image type because of the gradient.

          I may still be wrong. It would be interesting to have an answer to this problem, but this subject is not very present on the internet.

          EDIT : I feel reassured haha, but Safari iOS still don't work for me, hum

          0 points
          • Joshua TurnerJoshua Turner, 1 year ago

            Nope you're definitely right. I dropped in an edit to my last comment but you might have already clicked and missed it by then.

            0 points
            • Dimitri NicolasDimitri Nicolas, 1 year ago

              Haha we talk quietly through edit

              0 points
              • Joshua TurnerJoshua Turner, 1 year ago

                Hah, no more edits.

                I think this conversation serves to highlight why the utility you created is needed. It's difficult, if even possible, to accomplish this purely with CSS.

                Your tool works on every browser and as we've just seen is a lot easier to implement.

                1 point
      • Marc EdwardsMarc Edwards, 1 year ago

        The same technique, but with a 1×4px PNG would work across all browsers. You could even base64 and inline the PNG in your CSS, if you wanted. (4px so the interpolation is kept in the middle of the page, and the top and bottom pixel and 25% of the screen are solid fill).

        0 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, 1 year ago

      I think you can drop the top and bottom definition. Just defining the 50% twice should do the trick?

      0 points
      • Joshua TurnerJoshua Turner, 1 year ago

        Yep - just tried it and it had the same effect. But like we discovered above, most browsers won't show a gradient as the background in an over-scroll situation like they show a background color.

        1 point
        • Dirk HCM van BoxtelDirk HCM van Boxtel, 1 year ago

          Have we tried using box-shadow? (might have to stick it on the HTML instead of the BODY tag)

          1 point
          • Joshua TurnerJoshua Turner, 1 year ago

            That's a good idea - I thought it'd work but I just tried and when applied to the html root object anything outside of the viewport isn't rendered on overflow scroll.

            2 points
  • Ian WilliamsIan Williams, 1 year ago

    I've been meaning to pull this trick on a site for so long.

    0 points
    • Dimitri Nicolas, 1 year ago

      Yes I always dreamed it for a time. Now I have a simple script to put anywhere, it's maybe not the perfect script but it does its job.

      0 points