Is background-size property not animatable in IE11? - css

I've been trying to get this text underline transition to work: https://codepen.io/shshaw/pen/pdyJBW
a, .strike {
color: #FF5151;
text-decoration: none;
display: inline;
background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
background-position: 0 1em;
background-repeat: no-repeat;
background-size: 0% 6px;
transition: background-size 0.5s ease-in-out 0.2s;
}
a:hover,
a:focus {
background-size: 100% 6px;
transition-delay: 0s;
}
.strike {
color: #307672;
background-size: 0% 2px;
background-position: 0 0.5em; /*1em;*/
}
.strike:hover,
.strike:focus {
background-size: 100% 2px;
transition-delay: 0s;
}
html {
background: #000249;
color: #FFF;
font-size: 62.5%;
display: flex;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1.4;
max-width: 30em;
width: 90%;
margin: auto;
background: inherit;
-webkit-font-smoothing: antialiased;
font-smoothing: always;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Strike me! Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
And I've got it working in all major browsers except IE11. I've seen this SO question (Background size animation not working in IE11 or Ipad) where the accepted answer says: "Internet Explorer 11's set of animatable CSS properties is the same like they've started in IE 10 with, and background-size is not among those animatable ones."
That answer also links here: https://www.w3schools.com/cssref/css_animatable.asp
Which lists the animatable properties, and lists background-size as one of those animatable properties, but when I try to run their example (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_background-size) in IE11, it doesn't work.
I can't seem to find any documentation that explicitly lists the animatable properties in IE11, so is background-size simply not animatable in IE11, and is there any documentation that says so?

Related

Unable to apply style to scrollbars using css

Currently, I have a scrollbar displaying over part of the page when there is a need for it.
I would like to apply styling to the scrollbar such that it doesn't look so bright and I can have the background area of the scrollbar to be transparent. Hence, I tried to apply styling to it. But the scrollbar still seems to be the same. To test if the styling is working, I gave some styles to the scroll based on this article:
https://css-tricks.com/almanac/properties/s/scrollbar/
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid slategrey;
}
But nothing seems to change.
Don't even see those style attributes in developer tools.
Is it not possible to apply custom styling to the browser scrollbar ? Also, can I give scrollbar styling to a div element ? or It has to be at the root/body level?
This gives a transparent background on Firefox, Chrome, Edge and Safari.
Edit: It seems that height is needed under ::webkit-scrollbar in order for it to work on chrome using MacOS.
body {
margin: 0;
background: grey;
height: 500px;
overflow: overlay;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: green transparent;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
height: 10px;
width: 16px;
}
*::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}
*::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 10px;
border: 3px solid #ffffff;
}
<body/>
Try to also add a ::-webkit-scrollbar, like this
body::-webkit-scrollbar {
width: 12px;
}
Looks like you also need to add the ::-webkit-scrollbar to make styles work, I do not know the reason for this, and have not found an explanation. But the ::-webkit-scrollbar represent the whole scrollbar. An example:
body {
width: 300px;
height: 400px;
}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid slategrey;
}
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod auctor nulla, et fermentum nisi gravida quis. Phasellus molestie velit felis, nec vestibulum dolor tristique non. Mauris luctus nunc ultricies lacus tristique, at bibendum magna ullamcorper. Phasellus lobortis ut quam vel lacinia. Vestibulum euismod magna eu lacus semper lacinia. Phasellus id neque vel metus vehicula varius quis pellentesque massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut fermentum ex nisi, nec iaculis quam efficitur in. Vivamus pharetra nec velit id placerat.
In id pretium dolor. Nulla facilisi. Sed in faucibus purus, quis convallis lacus. Duis nisl lectus, euismod sagittis euismod ac, tempus quis tortor. In ut dui diam. Integer laoreet metus sed arcu interdum, vitae sagittis magna tristique. Morbi fermentum velit non lectus viverra iaculis. Curabitur ac nulla congue, vehicula quam id, congue tortor. Maecenas porta bibendum mauris, blandit aliquet massa rhoncus in.
Morbi aliquet nunc non dolor consectetur lacinia. Maecenas eu viverra magna. Sed consectetur gravida urna. Aenean eu vehicula mi. Duis a ex tristique lorem mattis molestie. Phasellus eget dolor ex. Nullam congue tortor in lorem lacinia, sit amet condimentum arcu facilisis. Nam quis felis placerat, rhoncus nulla non, accumsan justo. Morbi id placerat nunc. Aenean eleifend nec lacus vitae sodales. Vestibulum eu urna eu elit rhoncus dapibus non vitae ex. Vivamus eget cursus nibh. Vestibulum cursus ipsum diam, vel aliquet leo laoreet eu. Integer hendrerit, purus sed gravida euismod, metus odio aliquam purus, in semper orci urna a ex. Morbi dignissim finibus nisi sed aliquet.
Suspendisse in lectus nec orci tincidunt mattis. Morbi mollis nec nibh a dignissim. Vestibulum mi elit, dictum et posuere id, pharetra consectetur tortor. Suspendisse potenti. Sed suscipit interdum tellus, et gravida ipsum mattis sit amet. Maecenas fermentum non quam eu sollicitudin. Vestibulum sodales mauris ac ipsum fermentum vulputate. Nulla pharetra mattis gravida. Aenean at magna turpis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque dignissim ultricies quam, ac maximus tortor interdum vel. Quisque eget ultricies ligula. Duis urna augue, ornare ac euismod eu, maximus non augue. Cras eget mi sapien. Nulla tincidunt aliquam lacus in vulputate. Praesent vel feugiat dui. Phasellus tellus erat, malesuada et eleifend in, fringilla eu nisl. Maecenas hendrerit sem quam, congue fermentum arcu tincidunt vel.
</body>

Scrollbar on mac OS mozilla firefox and mobile safari

Can someone help me with the scrollbar on Mac OS X in Mozilla firefox and in mobile safari?
scrollbar-color in css works only in windows machines, other js libraries not working on , always scrollbar has system default styles.
Maybe someone has already had some dealings with this?
it worked for me without any problems. ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track and ::-webkit-scrollbar
More info developer.mozilla
div{
width: 400px;
height: 400px;
background: yellow;
overflow: auto;
}
::-webkit-scrollbar-thumb {
background: #0a59e3;
border-radius: 16px;
box-shadow: inset 2px 2px 2px hsl(219deg 31% 32%), inset -2px -2px 2px rgb(18 24 38);
}
::-webkit-scrollbar-track {
background: #0f1520;
}
::-webkit-scrollbar {
width: 1.65em;
height: 1.65em;
background: red;
}
<div class="visible-scrollbar">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisquebibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisquebibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>

How do I make 2 overlapping row elements with the same parent have the same height in CSS, where the z-index differs?

I am looking to make the div with the background on the left and right hand side, fill up the height of its container or be the height of another div the container contains (the magenta one).
Below are is an image.
Here is a JS Fiddle with my working code with a preview.
<div class="outercontainer">
<div class="innercontainerback orangeborder"></div>
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus. Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt. Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis.
</div>
</div>
And below is my CSS
html, body, .outercontainer, .innercontainerback { height: 100%; min-height: 100%; }
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
width: 100%;
}
.innercontainerback, .innercontainer { width: 400px; }
.magenta { background-color: magenta; }
.orangeborder { border: 5px solid orange; }
.innercontainerback {
/*margin-left: auto; margin-right: auto;*/
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y, repeat-y;
opacity: 0.88;
z-index: 1; position: absolute;
/* left: 50%; margin-left: -400px; */
top: 0px;
}
.innercontainer {
/* height: 100%; */
min-height: 100%;
/* margin-left: auto;
margin-right: auto; */
opacity: 1 !important;
position: relative; z-index: 0;
clear: both;
}
.padding1 {
padding-left: 90px; padding-right: 90px; box-sizing: border-box;
padding-top: 32px;
/*margin-top: 32px; */
}
How do I make 2 overlapping elements with the same parent have the same height in CSS of which both divs are not columns, and the z-index differs?
Remove height: 100% from outercontainer and add position:relative to outercontainer
html,
body,
.innercontainerback {
height: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
min-height: 100%;
position: relative;
}
.innercontainerback,
.innercontainer {
width: 400px;
}
.magenta {
background-color: magenta;
}
.orange {
background-color: orange;
}
.innercontainerback {
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y, repeat-y;
opacity: 0.88;
z-index: 1;
position: absolute;
top: 0px;
}
.innercontainer {
min-height: 100%;
opacity: 1 !important;
position: relative;
z-index: 0;
clear: both;
}
.padding1 {
padding-left: 90px;
padding-right: 90px;
box-sizing: border-box;
padding-top: 32px;
}
<div class="outercontainer">
<div class="innercontainerback orange"></div>
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
</div>
</div>
Or simplify your code with a pseudo element and the use if vh unit to avoid all the cascading height/min-height
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
min-height: 100vh;
display:flex;
width: 400px;
}
.magenta {
background-color: magenta;
}
.innercontainer::before {
content:"";
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y;
background-color: orange;
opacity: 0.88;
z-index: 1;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
.innercontainer {
position: relative;
}
.padding1 {
padding-left: 90px;
padding-right: 90px;
box-sizing: border-box;
padding-top: 32px;
}
<div class="outercontainer">
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
</div>
</div>

CSS Background Full Screen on Mobile is jumpy

I'm developing a web app and have a responsive (parallax) full screen background, that is adjusting on screen height and width. Problem is, that on MOBILE the background "ends" above the toolbar. If I'm scrolling down (and later up) with Firefox, I'm getting a jumpy effect with the content that is below the background, because it's adjusting to the toolbar.
I know that it is a well known problem, but I still can't find a fitting solution in my case. I added a screenshot below at what I'm trying to achieve.
I currently have the following:
.page-header-image {
filter: blur(4px);
background-image: url("../../../assets/images/party-blue-kite.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh - calc(100vh - 100%));
width: 100%;
position: fixed; // -> jumpy effect -> nullified through height transitition
// position: absolute; -> laggy on scroll
z-index: -1;
transform: scale(1.5);
transition: height 999999s;
}
What I'm trying to achieve
On mobile devices the 100vh value is indeed altered when the toolbar is visible what causes the jump effect of the background image. Applying a background image with a before on the body element reduces this effect.
body {
font-size: 3rem;
margin: 0;
position: relative;
}
body::before {
background-image: url('https://i.imgur.com/MrGY5EL.jpg');
background-position: center;
background-size: cover;
content: '';
display: block;
height: 100vh;
position: fixed;
width: 100%;
z-index: -1;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan quis ex eu pharetra. Curabitur ullamcorper nisl purus, quis rhoncus ipsum gravida efficitur. Integer sed massa orci. Aliquam et lorem quam. Morbi efficitur purus sit amet ex pulvinar, quis pharetra mauris aliquam. Duis in nunc mattis, fringilla nisl eu, placerat ligula. Etiam ut pellentesque arcu. Nulla facilisi. Vestibulum ac mauris ornare, malesuada odio sed, pharetra dolor. Donec eu elit nisl. Vestibulum purus felis, aliquam quis ultricies vel, pretium at enim. Pellentesque feugiat pulvinar sagittis. Praesent nec arcu nec mauris posuere ultrices nec in eros. Mauris dignissim turpis et dolor aliquet, id tempus elit porta. Nunc convallis aliquam mollis. Mauris nunc nulla, molestie et ultrices a, scelerisque et massa. Duis et diam nec urna rutrum feugiat eu id purus. Morbi convallis elit turpis, quis eleifend nulla viverra eu. Pellentesque vel gravida lacus, eget sodales dui. Vestibulum ullamcorper vesti sit amet nibh. Fusce ac massa felis. Nullam placerat tellus enim, vel congue libero bibendum ullamcorper. Aliquam sollicitudin non massa vel interdum. Vestibulum sit amet nunc condimentum, porttitor purus at, ultrices felis. Duis ultrices accumsan ligula id vestibulum. Donec massa justo, lacinia nec euismod sit amet, euismod non ex. Integer posuere euismod sapien vel convallis. Ut auctor, odio in cursus accumsan, enim magna vulputate dui, ut auctor enim tortor a nibh. Nulla commodo, ex eu placerat pulvinar, mi mi iaculis arcu, a facilisis lectus orci ornare lacus. Donec eget odio venenatis, aliquet augue vel, sagittis dolor. Quisque non dolor nec ipsum lobortis dignissim eget non ebulum nulla. Integer gravida posuere mi, sed pellentesque leo elementum ut. Mauris pharetra neque a commodo congue. Mauris consequat justo lacinia, lobortis mi vel, venenatis turpis. In hac habitasse platea dictumst. Nullam venenatis velit vel pharetra accumsan. Curabitur euismod semper molestie. Etiam blandit, mi lacinia commodo vulputate, leo velit consequat mi, a eleifend magna enimnim. Nunc in rhoncus ligula. Suspendisse consequat ac sem id pharetra. Nulla porta, tortor in rutrum ornare, dui magna consectetur ipsum, in tincidunt urna enim nec dui. Integer laoreet felis sem, at sagittis ipsum ullamcorper vel. Nullam mattis felis eget ipsum dignissim, sed lacinia nisi pellentesque. Sed sodales purus et nisi pretium, eu aliquet leo sagittis. Morbi pharetra, felis non semper ullamcorper, ante mauris condimentum sapien, a ultrices est turpis vel nisl. Curabitur lacus urna, tristique ac pretium a, vestibulum eu libero. Mauris tincidunt tellus ac vulputate tincidunt. Sed ultricies orci mattis diam lacinia sodales. Sed nec felis auctor, bibendum elit et, sodales dui.

Backdrop-filter: blur + box-shadow not rendering properly in Safari

I've tried using the CSS backdrop-filter: blur combined with the box-shadow property but the final result doesn't seem to be rendered properly in Safari.
I'm using macOS 10.15 Catalina and Safari 13.0.2 and I've also noticed that the same code snippet renders fine in Chrome.
Unfortunately the ::before and ::after solution that a user posted here cannot be applied to input fields or to elements containg text inside.
If you're using Safari you can understand better what I'm talking about by looking at my webisite in which I've first faced this issue: https://cristiandavideconte.github.io/myPersonalWebPage/
I'll leave a portion of code that you can use to reproduce this issue:
body {
display:flex;
justify-content:center;
background-image: url("https://wallup.net/wp-content/uploads/2014/10/nature/Sunset_Mountain_And_Lake_Free_Download.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
}
p {
color: white;
margin:0;
font-size:190%;
}
#presentationCard {
height:60vmin;
width:55vmin;
-webkit-box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
overflow-x:hidden;
overflow-y:scroll;
border-radius:5%;
background:rgba(0,0,0,0.3);
-webkit-backdrop-filter:blur(2rem) saturate(130%);
backdrop-filter:blur(2rem) saturate(130%);
-webkit-transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
overscroll-behavior:none;
}
#presentationCard::-webkit-scrollbar {
display:none;
}
#presentationCard p {
margin:calc(0.25 * 17vmin);
backface-visibility:hidden;
}
<body>
<div id = "presentationCard">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nunc lorem, quis commodo elit interdum vitae. Aliquam malesuada erat at dictum pretium. Donec pellentesque sed metus id commodo. Vivamus luctus erat non dui consequat, a tincidunt eros luctus. Vestibulum vel imperdiet risus, congue vehicula massa. Proin non iaculis nisl. Nam iaculis, libero ac accumsan bibendum, augue ante blandit mi, quis ullamcorper lacus metus eget risus. Duis in pretium sem.
Sed suscipit porttitor odio, ac auctor quam. Praesent gravida vulputate tortor id cursus. Nulla imperdiet luctus purus, vel suscipit ante lacinia vitae. Cras in quam dignissim, lacinia diam non, tristique purus. Curabitur sit amet risus a augue gravida accumsan ac vel massa. Nulla semper magna felis, ut malesuada ex semper quis. Suspendisse venenatis interdum turpis eget facilisis. Donec tincidunt, purus pharetra convallis volutpat, ante ex venenatis erat, et ultricies justo magna a tortor. Pellentesque commodo nisi mi, non lobortis velit cursus id. Praesent venenatis, tortor quis gravida gravida, tellus metus consectetur massa, non fermentum nisl massa nec nunc. Etiam sapien tortor, aliquam sed diam non, bibendum pellentesque neque. Curabitur facilisis sapien vel mollis viverra. Phasellus at aliquet eros. Curabitur suscipit, lorem in pellentesque consectetur, quam nulla hendrerit sem, quis congue odio elit vitae nulla. Sed viverra mauris eget elit elementum fringilla.
</p>
</div>
</body>
Comparison between Chrome (on the right) and Safari (on the left) rendering the code above
Zoomed version of Safari's rendering
It turned out to be a specific Safari 13.0 (MacOs Catalina and older versions) bug.
It has been solved with the BigSur update.

Resources