▼
Streaming live at 10am (PST)

Background image/Blend mode not working on Samsung S9 devices

#1

I have an issue with a background image/blend. It won’t show on the Samsung S9 devices, but it works fine on other.

s91
s91.jpeg540×1110 16 KB

w
w.jpg1080×2160 603 KB

My CSS:

<style>
  /*On the designer won't take effect. Only on live.*/
  
 
  /* Fix issue Gavin and Micah had with Chrome on mobile */
  .home-section-hero {
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-blend-mode: multiply;
  }
  
  /* Fix issue Panos had with IE and Edge */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .home-section-hero:after {
      content: '';
      background-image: linear-gradient(244deg,#0005d9,#ff0171);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: 0;
    }
  }

  /* Fix issue Panos had with IE and Edge */
  @supports (-ms-ime-align: auto) {
    .home-section-hero:after {
      content: '';
      background-image: linear-gradient(244deg,#0005d9,#ff0171);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: 0;
    }
  }
</style>

Here is my site Read-Only: https://zenus-test-db5ecba40678492bfc478d4408c2.webflow.io/
(how to share your site Read-Only link)

#2

Hi @Oscar_A_Montiel,

Does that happen on other Samsung devices? Other S9s? Maybe it is the chrome version?

#3

@avivtech

On two S9 devices from different countries it doesn’t works. They both use the latest Chrome version.

Also I just found out that viewing the site on “Desktop mode” on mobile, it works, so it’s something concerning the background image on mobiles only.

#4

Hi, @Oscar_A_Montiel!

I did some testing on an S9 and it was working on this end. See this image:

CloudApp

Could you try viewing this site in Incognito mode on your phone and see if it loads properly?

1 Like
#5

@Oscar_A_Montiel

Can you reproduce on crossbrowsertesting and tell us the exact
(!) Device - - Is only one device affected, or many devices?
(!) Browser - - Is only one browser affected, or many browsers? (chrome, sifari, samsung browser, andorid browser, other browser)
(!) User-Agent - - Is most current user agent being used or older user agent being used?
(!) OS - - Is only on Android OS or also on iOS?

combination?

#6

Still won’t work, in normal mode and Incognito on the S9.

#7

(!) Device - - At least 2 Samsung S9 devices from different countries won’t display it correctly. Others, such a Huawei, etc. display them okai.
(!) Browser - - It happens on Chrome.
(!) User-Agent - - I don’t know what that means.
(!) OS - - Well since its a Samsung, it has happened only on Android.

#8

GO to this site and post screenshots please:


image

https://www.whatsmybrowser.org/
image

Open Settings >> About This Device
post screenshot about OS version

#9

This link is from the device that won’t display it:

This from one that does:

1 Like
#10

What could it be ;_; It’s really confusing.

#11

I tried to instead use a simple jpg image, but still, it simply won’t display.

#12

Hi, @Oscar_A_Montiel! Thanks for all the additional information! Can you try to see if this displays properly on the S9?

2 Likes
#13

@rileyrichter

Yep! It does works now! What was the problem? And the solution?

1 Like
#14

And how could I keep it?

#15

Hi, Oscar! I just made a copy of your project and used a jpg instead of the images you were using and I removed the custom code.

I think this might be an issue with the code you are adding in. Want me to to move this to the custom code category to see if one of our community members might be able to track down the issue for you

1 Like
#16

@rileyrichter

Surely, I’ll appreciate it. Which custom code did you removed, though?

#17

also, could you lend me the jpg you created? I tried to do the same, but wouldn’t work for some reason.

#18

Hi, Oscar! I removed the style text in the head section of the home page.

See this image:

And I used the same image you uploaded! :smiley:

1 Like