The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background-blend-mode works OK on Safari but not on Chrome

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #273343


    I’m having a problem with a background image to which I’ve applied background-blend-mode in CSS.

    The problem occurs only when I look at the background image under two conditions:

    (1) in portrait orientation, and
    (2) using Chrome as the browser.

    When I do those two things, then the blue overlay (caused by using background-blend-mode) starts to disappear when I put my finger on the screen and move down the page. )I want the blue overlay to stay, whether I move down the page or stay at the top of the page.)

    (I’ve tried to copy the relevant bits of it into Codepen – see here: – but it doesn’t seem to be working when I look at it on a phone screen … which is the kind of screen on which I’m having the problems. You can see a better version of it here:

    Would anyone be kind enough to let me know what the problem is? (BTW, the relevant CSS appears under the class with the name “one” – or .one – if that makes it quicker to find the problem.

    Thanks for your help.

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.