CSS masters please...

Out of context: Reply #19

  • Started
  • Last post
  • 27 Responses
  • mg330

    Any of you CSS whiz men out there mind helping me figure out why mix-blend-mode of a background color above a video or photo works in Firefox, but not in Chrome or Safari?

    Oddly it works fine in Safari on mobile. No dice on Chrome or Safari. I currently have the green background color set to opacity:.8 so that you can at least see the video in the background, but it's using mix-blend-mode: multiply and it's only working in Firefox.

    http://mg33.com/music/home-augus…
    PW: agelesssea

    Any suggestions?

    mg33 0Permalink
    UpvoteDownvote
    Flag
    • my Safari Desktop seems to show it correctly. For chrome i disabled the z-index: -99 on .nk-awb-overlay and it looks correct nowBabySnakes
    • maybe try not having both the overlay and inner on same z-indexBabySnakes
    • i think just giving .nk-awb .nk-awb-overlay a z-index: -1 will work for some reason it don't like 0BabySnakes
    • Double down on what Babysnakes says, seems to be a z-index issue between the color layer and the video layer.T-Dawg
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread