I am working on a website project.
I put the image and set mix-blend-mode: screen.
It works well on all browsers except iPhone and iPad browser.
Please let me know solution.
Thanks & Regards.
I am not sure why this happen in only iPhone and iPad web browser.
Same thing here. "Mix-blend-mode: multiply" is working on computer browsers (everyone I tested), Samsung browser and Android Chrome but not in iPad/iPhone Safari or Chrome. I paste my code here but I think it's not about the code itself but Apple OS issue with this property.
<div id="container">
<div id="content">
<!-- Card content -->
</div>
<div id="red-background"></div> <!-- empty div for transparent effect -->
</div>
#red-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: url(../imgs/fondo-rojo.jpg);
background-repeat: repeat;
background-color: #ffffff;
// background-color: #F40009;
mix-blend-mode: multiply;
// background-blend-mode: multiply;
border-radius: 50px;
}
I tried both properties: "background-color" and "background" with a red little jpg but none of them have worked. Same thing with "mix-blend-mode" and "background-blend-mode".
Related
Initially I was only able to reproduce on Mac Retina displays with Chrome version 65.0.3325.181.
However, I have been able to duplicate it in Windows and Linux on the same version of Chrome by selecting "Laptop with HiDPI screen" in the device list in Chrome developer tools.
If you turn on the HiDPI screen device option and run the codepen below you will notice that the button writes to the console initially. But after scrolling down and focusing on the non sticky content the button will no longer be interactive. It appears that if you click a lot and move the mouse around it will eventually work again.
If you take away the height and overflow on the outer container it does work, however this functionality I would like to preserve.
Can anyone think of another workaround?
https://codepen.io/acarl/pen/MVdzZj
HTML
<div class="container">
<div class="sticky">
<button onclick="console.log('clicked')">
write "clicked" to console
</button>
</div>
<div class="content">
</div>
</div>
CSS
.container{
height: 300px;
overflow-y: auto;
}
.sticky {
background-color: #ccc;
padding: 2rem;
position: sticky;
top: 0;
}
.content {
height: 800px;
background: linear-gradient(red, yellow);
}
I did notice this Chrome bug report, but it appears pretty old and this may be a more special case of the bug orginaly fixed.
https://bugs.chromium.org/p/chromium/issues/detail?id=673538
This has been fixed in Chrome 66.
Weird problem: I'm working on a bootstrap responsive site, and using the Chrome Developer Tools Device Emulator to see how things look. Unfortunately, what I see on Chrome Devtools doesn't look at all like what I see on an actual mobile phone.
For some reason, my background images aren't propagating correctly. The defect is noted on four of the five slides on that home page.
<div id="slide-2m" class="gf_mobile" style=" height: 100%; margin: 0 auto;
overflow: hidden; background-color: white;
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/oranges_mobile.png);
background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; padding: 40px 0;" >
<div style="height: 100%; overflow: hidden; margin-top: 20%;" >
<img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/who_we_are_text_883x862.png" style="width: auto; height: 55vh;">
</div>
<div style="height: 100%; overflow: hidden; margin-top: -300px;">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/sqf_logo_883x862.png" style="width: auto; height: 55vh; ">
</div>
</div>
Hmm.. I'm wondering if its either the use of vh (view port units?) or perhaps the dual use of background-color: white; and background-image: (I'm using a .png with transparent background, so I need the white in there.) ?
So the obvious question is, why doesn't the emulator accurately match the actual mobile device? Is that a bug in the Chrome Developer Tools?
AAAAAaarggh! I just tested the same site with a Samsung Galaxy S5 with Chrome browser, and it looks same as the Chrome Browser Emulator. Perfect! So... does that mean Chrome error'd in the details of its iPhone simulator (or ... is Apple at fault here?)
Note: And yes, I'm aware of the issues involving mobile (visual viewport vs layout viewport) ref: A Tale of Two Viewports.
I'm going to attempt to convert all vh's and vw's over to pixels and then retest. But I'm still baffled why the difference in the emulator. Again, should this be a bug submission, and to whom.. Apple or Chrome folks?
Update: I'm working on converting all VW and VH's to pixels but so far on a screen by screen basis, that is a fail. I'm really thinking this has something to do with CSS and background-size and background-location. Look at the background image on this slide, emulator vs iphone.
<div id="slide-4m" class="gf_mobile" style=" height: 100%; margin: 0 auto; overflow:
hidden; background-color: white;
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/farm_field_1018x474.jpg);
background-repeat: no-repeat; background-position: center center; background-attachment: fixed;
background-size: cover; padding: 40px 0;" >
One more thing I just now noticed: I've set up background-attachment: fixed; and that's how they work on the emulator. On the Samsung, I can see the backgrounds on all the five slides but they DO SCROLL. On the iPhone, I can't see the background on most of the slides. The whole thing is odd.
Oops: Background-fixed, not so hot on mobile...
Ugh. The answer is to not use background-attachment: fixed; for mobile.
ref: How to replicate background-attachment fixed on iOS and Fixed background image with ios7
Hmmm.. Should the dev tools emulator help you on that topic? Should that be a suggested feature to Google Chrome team?
Safari on the iPhone has certain size limits for images (JPG up to 32 megapixels, GIF/PNG 3-5 megapixels depending on device).
Can you try using a different, smaller (in resolution) image for the background image?
Currently putting together a Tumblr theme, having a problem with the video post in that the the embedded video from Vimeo is displaying perfectly fine in Safari (8.0 and iOS 8.1) as well as Google Chrome's mobile app. However it is just not displaying on Chrome (v39.0.2171.71) or Firefox (v33.1.1) on my desktop and just shows the black background I've applied to it? Does anybody know what may be going on here?
I have put it as it is on Tumblr here ( link ) and my video post code is as follows:
{block:Video}
<section class="e-all d-all c-all b-all a-all">
<div class="video-player">{Video-700}</div>
{block:Caption}
<div class="e3-e6 d3-d6 c4-c7 b4-b7 a4-a7 caption">{Caption}</div>{/block:Caption}
</section>
{/block:Video}
Any help would be greatly appreciated, thanks.
The CSS looks like an implementation of the fluid width video technique but is missed some properties.
CSS
.video-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
background-color: #000000;
}
.video-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Result
On a side note, I would look at http://fitvidsjs.com/ as either a more solid solution or a guide how to make your own. Videos embeds will not always be a 16:9 ratio.
I'm a bit confused. I try to resize an image using CSS. While in Safari and Chrome the image resizes, in IE and Firefox it keeps it's original size but crops. What do I need to change to have it resized in FF and IE as well?
CSS looks as follows:
body {
background-color:black;
width: 100%;
height: 100%;
}
#image1 {
background-image: url(img/myimage.png);
background-size: 100% 100%;
position: absolute;
width: 532px;
height: 250px;
top: 100px;
left: 100px;
}
and the body:
<body> <div id='image1'></div> </body>
I've also tried your code in Firefox (17.0.1 -- OSX).
With and without
<!DOCTYPE html>
the image actually resizes as expected.
You sould check for typos in your CSS I guess.
I think you're missing a % or px in
background-size: 100% 100;
I've tested this jsfiddle in Chrome, IE, and Firefox with good results. I also added no-repeat in case there is a need to scale smaller images up.
Try making the background position fixed, and then add this to your html.
<img src="img/myimage.png" alt="background image" id="image1" />
i am trying to put few images on top of another image, and then i am fading in and out those images on top, here's my css:
#spark1 {
bottom: 211px;
left: 252px;
position: relative;
width: 75px;
}
#spark2 {
bottom: 100px;
left: 286px;
position: relative;
width: 50px;
}
my HTML:
<div id="spark1">
<img src="clientside/images/big_sparkle.png" />
</div>
<div id="spark2">
<img src="clientside/images/little_sparkle.png" />
</div>
my fade effect (in case this has anything to do with the problem i am facing)
$(function(){
setInterval(function() {
$('#spark1').fadeOut(800).fadeIn(800);
$('#spark2').fadeOut(1000).fadeIn(1000);
}, 2000);
});
Everything looks good on firefox and chrome, however on IE 8 (havent tested on any earlier versions of IE), the sparkle images is having a wrong positioning and it has a black background instead of transparent, how can i handle this ?? thanks
Regards
Update:
i have tried few css workaround, but nothing seems to work (probably because i am applying it the wrong way :p), but finally i have found a slight convenient solution, i put this line after my jquery fade effect:
$("#spark1").css('filter', 'none');
and this css to my img:
#spark1 img{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; IE8
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); IE6 & 7 */
zoom: 1;
}
thanks for pekka for pointing me out to those articles, i think i am going to stick on to this solution for now
If your PNGs have alpha transparency, there is in fact a bug that persists even in IE8: Images with alpha transparency cannot be made transparent (= given a opacity value other than 1).
See this question for background info and workarounds.