I have an issue with a background image/blend. It won’t show on the Samsung S9 devices, but it works fine on other.
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 )
avivtech
(Aviv Shwartz)
April 3, 2019, 5:33pm
2
Hi @Oscar_A_Montiel ,
Does that happen on other Samsung devices? Other S9s? Maybe it is the chrome version?
@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.
Hi, @Oscar_A_Montiel !
I did some testing on an S9 and it was working on this end. See this image:
Could you try viewing this site in Incognito mode on your phone and see if it loads properly?
1 Like
@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?
Still won’t work, in normal mode and Incognito on the S9.
(!) 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.
GO to this site and post screenshots please:
What browser am I using? What version is my browser? WhatsMyBrowser.org is the easiest way to find information about your browser, and share it to your designer, developer, or support rep.
Open Settings >> About This Device
post screenshot about OS version
What could it be ;_; It’s really confusing.
I tried to instead use a simple jpg image, but still, it simply won’t display.
Hi, @Oscar_A_Montiel ! Thanks for all the additional information! Can you try to see if this displays properly on the S9?
https://zenus-test-db5ecba4067849-315112217c380.webflow.io/
2 Likes
@rileyrichter
Yep! It does works now! What was the problem? And the solution?
1 Like
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
@rileyrichter
Surely, I’ll appreciate it. Which custom code did you removed, though?
also, could you lend me the jpg you created? I tried to do the same, but wouldn’t work for some reason.
Hi, Oscar! I removed the style text in the head section of the home page.
See this image:
https://cl.ly/5dd23642d001/Image%2525202019-04-03%252520at%2525202.55.42%252520PM.png
And I used the same image you uploaded!
1 Like
system
(system)
Closed
June 3, 2019, 4:57pm
19
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.