Blurry Ellipse in Chrome on Mac OS - css

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?

Related

Different gradient color in chrome and safari

I'm trying to render gradient and it's collor is different on safari and chrome. How to make it identical? (Left - chrome, right - safari).
https://codepen.io/max-frai/pen/XWMEQZJ
<div id="test"></div>
#test {
width: 400px;
height: 300px;
background: -webkit-linear-gradient(top, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
background: linear-gradient(to bottom, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
}
You can find a good explanation of what is going on here. Basically, this has been in the working draft for years now, and Safari is the only major player who hasn't fixed it. See current status here:
Partial support in Safari and Older Firefox versions refers to not
using premultiplied colors which results in unexpected behavior when
using the transparent keyword as advised by the spec.
I guess if you were desperate, you could calculate the gradient yourself and put in a lot of stop points. Otherwise just wait for Apple to fix.

CSS overlay and screen blend modes look different on phone and laptop

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

Background-image and background not working on mobile/underlining is driving me crazy

I'm working on a website that includes a lot of anchor links, some of which are a different colour to the text itself. This hasn't been a problem for 90% of development and I went forward with standard text decoration for regular links and background-image with a linear-gradient for the coloured links so I could animate them into highlighting
I noticed that those coloured links weren't working at all on mobile though. Sure, no problem, I'll try another method. I tried a lot of methods.
The first was switching everything up to border-outline and this is when I realised that I liked the thicker line on the regular links. Unfortunately this didn't work because the links are inline in paragraphs and changing the line-height (I used that to change how far the underline is beneath the text) broke the paragraphs.
What I'm currently trying is bringing in a 1x2 pixel image and using that as the background image with repeat-x and it looks great! On desktop. Neither Chrome nor Firefox for mobile (the ones I've tried) even show the underline.
I've put in all of the media queries already and adjusted this stuff for each size screen, but still no luck
TL;DR - I'm using a background image to underline text and it's great on desktop but doesn't show at all on mobile. Any advice or tips on an underlining method that will for sure work?
Here's the underlining code I'm using:
a {
color: var(--font-color-main);
text-decoration: none;
background-image: url('../assets/blackunderline2.png');
background-position: 0 22px;
background-repeat: repeat-x;
}
And here's what I'm using on the coloured highlights (also doesn't work on mobile, and I am happy to switch this to the pixel approach if that works!)
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
/* Firefox 3.6 - 15 */
/* Opera 11.1 - 12 */
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, orange), color-stop(90%, transparent));
background-image: linear-gradient(orange 80%, transparent 90%);
background-image: linear-gradient(orange 80%, transparent 90%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 7px 8px;
So I hooked my phone up to the dev tools on my development PC and found out that (for reasons I'm unsure of right now) the line height was changing on mobile only despite the desktop media queries being fine.
This meant that the underlining I was doing with the background image was too low to be visible so I shifted it up and now we're golden!

Border-radius on mapbox in safari

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);

CSS problems on android device

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;
}

Resources