I am trying to use blend modes for a website for a project, but I've found that they look different on my phone browser (chrome v 78.0.3904.84 on iphone 7) to my browser on my laptop (chrome v 78.0.3904.97 on mac).
It looks like this on the laptop, and like this on the phone.
So far as I can tell, both browsers support mix-blend-modes, so I'm not sure what's different.
The code for the elements that are being blended is:
.GraphButton {
font-size: calc(10px + 8vmin);
font-weight: 300;
color: var(--button-text);
background: var(--main-yellow);
mix-blend-mode: overlay;
height: 27vh;
width: 35vw;
margin: auto 6vw;
overflow: hidden;
}
This is a div on top of an svg background image. There is no transform involved.
Does anyone know what could be causing the difference or how to fix it?
mix-blend-mode is not supported on SVG elements in Safari and iOS Safari, but it IS supported for SVG elements in chrome. See https://caniuse.com/#search=mix-blend-mode
Related
Are env variables supported in styled-components? I was trying to utilise inset ones to style around iPhone's notch, but the following doesn't work, nor does it fall back to those 40px
const Header = styled.header`
padding-top: env(safe-area-inset-top, 40px);
`;
normal padding-top: 40px; works as expected.
I tested this in chrome browser on my desktop and safari on my iPhone X, the result is no padding at all.
Styled Components does support it, this must be something else.
Perhaps your iOS version doesn't support env()?
Try using constant() as a fallback too:
body {
/* No variables */
padding-top: 12px;
/* iOS Safari 11.2, Safari 11 */
padding-top: constant(safe-area-inset-top, 12px);
/* iOS Safari 11.4+, Safari 11.1+, Chrome 69+, Opera 56+ */
padding-top: env(safe-area-inset-top, 12px);
}
I have been trying to create a background graphic with huge overlapping ellipse shapes using html&css only.
The problem: In Chrome, a huge ellipse - as it is shown below - gets blurry near its top.
It looks to happen only on Mac OS, but not on my Windows PC
It looks just fine in Safari and Firefox.
Chrome (mac)
Safari
.ellipse {
width: 30%;
padding-top: 540%;
background: red;
border-radius: 50%;
}
<div class="ellipse"></div>
Any guesses, how can I make it look sharp in Chrome?
I'm working on a new client's website, and everything looks good in every browser except safari. The Problem: The Background image is not responding to the css in place in safari(The 5px size).
.et_pb_section_0 { /* The background CSS */
background: url(http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png) 5px;
}
I have been unable to find any definitive information regarding this issue.
Because Safari shares webkit functionality with chrome, attempts to resolve this issue via that resulted in the site breaking in chrome. Is there a way to target safari specifically?
In the CSS background shorthand property, the background-position comes before background-size. This makes your 5px correspond to background-position, not background-size.
To fix this, add a background-position and separate it from background-size with a slash:
.et_pb_section_0 {
background: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png") 0 / 5px;
}
Alternatively, define background-image and background-size separately:
.et_pb_section_0 {
background-image: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png");
background-size: 5px;
}
I am using this angular directive for mapbox (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map) and trying to get the border-radius to be 10px which works perfectly in Chrome and Firefox but on Safari it isn't working.
This is the CSS I am using (For some reason it only works with opacity: .99 on chrome/firefox)
.angular-mapbox-map{
opacity: .99;
border-radius: 10px;
}
Does anybody know what is going on or how to resolve this. You can play with the mapbox element in the link above using chrome dev tools or the equivalent.
I found a solution here How to make CSS3 rounded corners hide overflow in Chrome/Opera using:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
I have a pretty simple navbar, which has it's background defined by using CSS's, background-image property with the linear-gradient function. It works great in every latest desktop browser, and it also works in Android 4.4+ browsers too. But when I am testing it on a 4.4- Android device, the backround is not visible. I've checked caniuse.com which says the following things:
that background-image property works only partially on Android 4.3- (size is not supported which I am not using anyways)
that linear-gradient function on Android 4.3- works only with the -webkit- prefix
So this would be my problem, I tought, and tried to implement a webkit version of the same css property, but to no avail. I can't make this work, what could I be doing wrong? Here's the css rule that I am using, and below it, you will find some additions that I have tried, but without success. The background appears correctly on desktop browsers, but it is invisible on mobile devices(tested it with a physical Galaxy Express, with 4.2 Android, and with a bunch of other 4.3- Androids on BrowserStack).
.converser_navbar {
height: 50px;
background-image: -webkit-linear-gradient(to bottom, #6374B6 0px, #3D538C 100%);
/* this is the webkit version, tried putting it after and before the non webkit version,
neither one works, also tried using ONLY the webkit version, that only disables the
background on the desktop browsers too, also tried prefixing background-image
with -webkit-, but that also does nothing at all */
background-image: linear-gradient(to bottom, #6374B6 0px, #3D538C 100%);
border-bottom: 2px solid #898989;
color: #FFF;
position: relative;
z-index: 10;
top:0;
transition: all 0.6s;
}