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);
Related
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
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;
}
The situation is I have an inline SVG generated by Grunticon and inserted into the DOM. It's white on a grey background with a drop-shadow.
I used the following CSS for the shadow:
svg {
-webkit-filter: drop-shadow(1px 1px 0 #141414);
filter: drop-shadow(1px 1px 0 #141414);
}
This works fine in Chrome, Opera, Firefox and everywhere else I've tested it, except Safari on iOS and desktop. The CSS filter makes the SVG disappear.
It's not just the drop-shadow filter either, any filter seems to have this effect.
A demo is on Codepen at http://codepen.io/derekjohnson/pen/MyOaRY
Can this be worked round to make it work in Safari?
Annoying that this doesn't work, but Safari is the new IE after all! :P
A workaround is to wrap the SVG in another element and apply the filter to that.
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;
}
I have a page with a google maps in it, now I'm trying to make a border radius on it. This is working in browsers like Chrome and Firefox but not working on safari.
You can find the page here: clients.steven-dejong.nl/amano/#contact
EDIT:
It's working with the address block and if I add -webkit-border-radius and -moz-border-radius it makes no sense.
The only part where my border radius isn't working is the google maps container
Border Radius to Google Map in Safari
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-transform: translateZ(0);
Use this snippet to both the map iframe and its parent div
Use the -webkit prefix and do something like below:
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px; /* Adjust as needed */
To make it work in all browsers:
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;