• Dimitri NicolasDimitri Nicolas, over 2 years 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, over 2 years 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 NicolasDimitri Nicolas, over 2 years 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, over 2 years 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, over 2 years ago

            Haha we talk quietly through edit

            0 points
            • Joshua TurnerJoshua Turner, over 2 years 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, over 2 years 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