Using env() css variables with styled-components - css

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

Related

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

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

Border Radius not working in safari

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;

Why doesn't [CSS feature] work in [browser] but works in others?

I tried using transition on Firefox 15 and it didn't work even though it worked on other versions of Firefox and other browsers like Chrome and Safari.
When I view the properties using Firefox's inspector the transition is struck through and gives an error of "Invalid property value". MDN and caniuse say it's supported on Firefox 4 and above!
#mydiv {
transition: width 1s; /* Did I do this wrong? */
background: #f00;
width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }
How come sometimes properties like transition and animation work in some browsers and are invalid in others?
Disclaimer: This is the canonical duplicate for all questions solvable completely by adding vendor prefixes. Stack Overflow questions should not be this broad unless discussed on meta and a canonical answer created thereafter like this one was.
Though it is not always the case, one of the most common reasons why a property like transition or animation works on some browsers and not others is because of vendor prefixes.
What are vendor prefixes?
At the time version 4 of Firefox was introduced, the CSS transition module specification was a Working Draft. Before a spec is finalized (in practice, this is when it reaches Candidate Recommendation), browser vendors add vendor prefixes to properties, values, and #-rules to prevent compatibility problems in case the spec changes.
Vendor prefixes are exactly what their name describes - a vendor-specific (vendor meaning a company who develops a browser) prefix of a property or value. They are often implemented in a specific way for each browser because the property or value is still in one of the many experimental phases before the Candidate Recommendation stage, which is the stage where they are considered implementation-ready.
The most common ones are -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.), and -ms- (Microsoft Internet Explorer), but there are more.
When do I need to use them?
That depends completely on what browsers you're looking to serve, what properties and values you're using, and at what point in time you are developing your website. There are sites that try to keep a current list but they are not always accurate or kept up-to-date.
Following are some of the most commonly prefixed properties and values. If your project does not supporting the browsers mentioned in the comment to the right of the property, then there is no need to include it in your CSS.
Transitions
An unprefixed property sometimes has prefixed equivalents, such as -webkit-transition.
In order to get full possible browser support, the following is necessary:
.foo {
-webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
-moz-transition: <transition shorthand value>; /* Firefox 4-15 */
-o-transition: <transition shorthand value>; /* Old opera */
transition: <transition shorthand value>; /* Modern browsers */
}
Note that an -ms- prefix exists for transition, however it was only implemented by pre-release versions of IE10 which are no longer functional, and it is therefore never needed. It is implemented unprefixed in IE10 RTM and newer.
Transforms
.foo {
-webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
-ms-transform: <transform-list>; /* IE9 */
transform: <transform-list>;
}
Animations
Animations need to have the property prefixed and the corresponding keyframes prefixed, like so:
.foo {
-webkit-animation: bar; /* Safari 4+ */
-moz-animation: bar; /* Fx 5+ */
-o-animation: bar; /* Opera 12+ */
animation: bar; /* IE 10+, Fx 16+ */
}
#-webkit-keyframes bar { /* Keyframes syntax */ }
#-moz-keyframes bar { /* Keyframes syntax */ }
#-o-keyframes bar { /* Keyframes syntax */ }
#keyframes bar { /* Keyframes syntax */ }
Flexbox
Values can also be prefixed, as in the case of flexbox. Note: For maximum browser compatibility, flexbox-specific properties like ordinal-group, flex-flow, flex-direction, order, box-orient, etc. need to be prefixed in some browsers in addition to the following:
.foo {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: <flex shorthand value>;
-moz-box-flex: <flex shorthand value>;
-webkit-flex: <flex shorthand value>;
-ms-flex: <flex shorthand value>;
flex: <flex shorthand value>;
}
Calc
.foo {
width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
width: -moz-calc(<mathematical expression>); /* Firefox <16 */
width: calc(<mathematical expression>); /* Modern browsers */
}
Gradients
See CSS Gradients on CSS-Tricks for more information.
.foo {
background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}
Note that left and to right represent the same direction, left-to-right, and therefore left and to left point opposite ways. See this answer for some background info.
Border-radius (Not needed in most cases)
.foo {
-webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
-moz-border-radius: <length | percentage>; /* Firefox 3.6 and lower */
border-radius: <length | percentage>;
}
Box shadow (Not needed in most cases)
.foo {
-webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
-moz-box-shadow: <box-shadow shorthand value>; /* Firefox 3.6 and lower */
box-shadow: <box-shadow shorthand value>;
}
How can they be implemented with JavaScript?
To access prefixed attributes and events in JavaScript, use the camelCase equivalent of the CSS prefix. This is true for event listeners like foo.addEventListener('webkitAnimationIteration', bar ) as well (foo being a DOM object, like document.getElementsById('foo')).
foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';
Prefixing tools
Online prefixers can be helpful but are not always reliable. Always make sure to test your project on the devices you wish to support to make sure that each has the appropriate prefix included.
CSS Pre-processor functions:
SASS & SCSS properties prefixer
LESS properties prefixer
JavaScript prefixer functions:
-prefix-free for CSS properties and values
Event prefixer
See also: Why do browsers create vendor prefixes for CSS properties?

using SVG sprites in Opera is rendering badly

I would like to use SVG sprites in Opera, and images are shown well on default zoom level, but when i zoom in they are not rendering properly.
The reason i want to use this is so i can have a simple sprite.png fallback for browsers that do not support SVG.
This works well in other browser, only Opera is giving me trouble...
Example of html and css:
<span class="members-login sprites">Login</span>
.sprites {
background: url("/images/sprites.svg") repeat scroll 0 0 transparent;
}
.members-login {
background-position: 0 -39px;
display: block;
height: 1em;
line-height: 1em;
padding: 0 0 0 16px;
}
Opera is known to cause issues with svg as background images, especialy for sprites. Since you are using fallback png, do that also for opera with opera specific css like this.
doesnotexist:-o-prefocus, .sprites {
background: url('/images/sprites.png') no-repeat 0px 0px;
}
If you find a solution to fix opera issue with svg sprite please post it here.

Resources