We Keep Coding

Appending to section goes outside the section

Okay so basically I have a chat app I made and it appends a paragraph to the chat class which is inside a div which the class chat is a section but when I make enough messages it would put the messages outside the section as in like the background color would only show for a certain amount of messages then just be normal so like the height of it is broken for some reason and I can't figure out how to fix that.
$('.chat').append('<p id="' + Math.random() + '"><strong style=color:' +
data.color + '> ' + data.user + '</strong> <span style=color:"black">' +
data.message + '</span></p>');
* {
box-sizing: border-box;
transition: all .3s ease;
}
html {
background: #eee;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
main {
width: calc(100% - 20px);
max-width: 500px;
margin: 0 auto;
font-family: 'Mukta Malar', Arial;
/*font-family: Helvetica, Arial, Sans, sans-serif;*/
}
h1 {
margin: 0;
padding: 10px 0;
font-size: 32px;
}
.user-count {
font-size: 32px;
}
.chat {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: #ffffff;
opacity: 90%;
padding: 5px 10px;
/*this is for the msgs */
}
.adminTools {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: white;
opacity: 90%;
padding: 0px 20px;
}
.chat p {
margin: 0 0 5px 0;
}
input[type=color],
button {
/*input alonwas here too*/
width: 100%;
font: inherit;
background: #fff;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
button:hover {
cursor: pointer;
background: #ddd;
}
#media all and (min-width: 500px) {
.chat {
height: 300px;
/* height: calc(100vh - 140px);*/
}
input {
width: calc(100% - 160px);
}
button {
float: right;
width: 150px;
}
}
.scroller {
height: 500px;
overflow-y: scroll;
/* scroll-snap-type: y mandatory; */
}
.scroller section {
scroll-snap-align: start;
}
div {
overflow: auto;
}
#colorPicker {
width: 100%;
font: inherit;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
.adminTitle {
font-size: 25px;
}
.noscroll {
overflow: hidden !Important
}
input[type=color] {
width: 70px !important;
height: 70px !important;
border-radius: 100%;
overflow: hidden;
}
input[type=color]::-webkit-color-swatch {
border: solid;
border-radius: 100%;
padding: 50%;
border-color: white;
}
.userDiv {
position: fixed;
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
/*remove this if it breaks*/
body {
height: 100vh;
display: grid;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.inp {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
border-radius: 3px;
overflow: hidden;
}
.inp .label {
position: absolute;
top: 20px;
left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
transform-origin: 0 0;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
pointer-events: none;
}
.inp .focus-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
}
.inp input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border: 0;
padding: 16px 12px 0 12px;
height: 56px;
font-size: 16px;
font-weight: 400;
background: rgba(0, 0, 0, 0.02);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
color: #000;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.inp input:not(:-moz-placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
box-shadow: inset 0 -2px 0 #0077FF;
}
.inp input:focus+.label {
color: #0077FF;
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus+.label+.focus-bg {
transform: scaleX(1);
transition: all 0.1s ease;
}
.btn {
border: none;
border-radius: 5px;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
color: #fff;
background-color: #4c6e87;
box-shadow: 0 2px 8px -2px rgba(60, 83, 199, 0.5);
outline: none;
-webkit-tap-highlight-color: transparent;
transform: translateY(0);
}
.btn.ripple {
background-position: center;
transition: background 0.8s;
}
.btn.ripple:hover {
background: #3f5a6e radial-gradient(circle, transparent 1%, #3f5a6e 1%) 50%/16000%;
}
.btn.ripple:active {
background-color: #3f5a6e;
background-size: 100%;
transition: background 0s, transform 0.2s;
transform: translateY(1px);
}
<head>
<title>Msged</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main>
<header>
<center>
<h1 class="user-count">Online: 0</h1>
</center>
</header>
<!-- <article class="scroller"> -->
<div id="maindiv1">
<!-- style="height:400px;"> -->
<section class="chat"></section>
<!-- </article> -->
</div>
<form>
<label for="inp" class="inp">
<input type="text" placeholder="Message #main" />
<!-- <input type="text" style="border-radius: 25px; border: 1px inline black;" placeholder="Say something" /> -->
</label>
<!-- <input type="file" id="myFile" name="filename"> -->
<button class="btn ripple">Send</button>
</form>
</main>
<main>
<header>
<form>
<h1 id="colorPicker">
</h1>
<h1 id="userChecker">
</h1>
<!-- <button id="colorBtn">Change Colour</button> -->
</form>
</header>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/cookie_js#1.2.2/cookie.min.js"></script>
<script src="https://unpkg.com/socket.io-client#2/dist/socket.io.slim.js"></script>
</body>

Adding overflow: auto; to .chat in the css-file lets the section scroll and keep its background.

Javascript Animated Skill Bar On Scroll

I'd like to activate all of this animations whenever I scroll to a certain section, in this case the second one.So basically it starts with the section one and whenever i reach the second one i want all of this to be activated. I've tried many things, but couldn't really figure out a way to solve this. Thanks in advance.
.skills {
padding: 4.8rem;
border-bottom: solid 1px #ececec;
max-width: 1440px;
max-height: auto;
}
.skills-bar {
width: 90%;
display: flex;
flex-direction: column;
gap: 3.2rem;
margin-top: 2.8rem;
border-radius: 1rem;
padding: 3rem 3.5rem;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
font-family: "Montserrat", Sans-serif;
}
.skills-bar .bar {
margin: 2rem 0;
}
.skills-bar .bar:first-child {
margin-top: 4.8rem;
}
.skills-bar .bar .info {
margin-bottom: 5px;
}
.skills-bar .bar .info span {
font-size: 2rem;
font-weight: 500;
opacity: 0;
animation: showText 0.5s 1.5s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skills-bar .bar .progress-line {
position: relative;
height: 1rem;
width: 100%;
background: #ececec;
border-radius: 1rem;
transform: scaleX(0);
transform-origin: left;
box-shadow: inset 0xp 1px 1px rgba(0, 0, 0, 0.05),
0xp 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line span {
height: 100%;
width: 80%;
background: #9013fe;
position: absolute;
border-radius: 1rem;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.progress-line.html span {
width: 90%;
}
.progress-line.css span {
width: 85%;
}
.progress-line.js span {
width: 70%;
}
.progress-line.react span {
width: 20%;
}
.bar .progress-line span::before {
position: absolute;
content: "";
right: 0;
top: -12px;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.bar .progress-line span::after {
position: absolute;
right: 0;
top: -28px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
background: #000;
padding: 1px 8px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line.html span::after {
content: "90%";
}
.progress-line.css span::after {
content: "85%";
}
.progress-line.js span::after {
content: "70%";
}
.progress-line.react span::after {
content: "20%";
}
.skills-header {
font-family: "Montserrat", Sans-serif;
}
.skills-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 2.4rem;
margin-top: 9.2rem;
max-width: 100%;
}
.skills-heading-secondary {
color: #000;
font-weight: 600;
font-size: 1.8rem;
}
.skills-text {
color: #495057;
font-size: 1.4rem;
line-height: 1.5;
}
<section class="section skills bar--hidden" id="section--2">
<h2 class="skills-header heading-tertiary">Sklills</h2>
<div class="skills-bar">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line bar--hidden html"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>JAVASCRIPT</span>
</div>
<div class="progress-line js"><span></span></div>
</div>
<div class="bar">
<div class="info">
<span>REACT</span>
</div>
<div class="progress-line react"><span></span></div>
</div>
</div>
</section>

how to add the same carousel multiple times on the same page?

i'm new to web and i want to use this javascript code multiple times on the same page for multiple carousels but it only works on the first carousel , i tried changing names but it did not help !
this is the js code:
const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});
and this is the html just so you know about the names i made it short and delete all items so you can read it faster if you want to run it , you should add 8 or more items :
<div id="main">
<div class="carousel__container">
<main class="grid-item main">
<div class="items">
<div class="item item1">
<div class="carousel-item">
<img class="carousel-item__img" src=" " alt="img">
<div class="panel1 ">
</div>
<div class="info ">
<a>
<h3>writer : </h3>
</a>
<a>
<h3>name : </h3>
</a>
<a>
<h3>price : </h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and the css :
.carousel {
margin: 5px;
width: 100%;
overflow: scroll;
position: relative;
box-shadow: border-box;
}
.carousel__container {
white-space: nowrap;
margin: 40px 0px;
padding-bottom: 10px;
}
.carousel-item {
background: rgb(136, 129, 116);
width: 190px;
height: auto;
border-radius: 20px;
overflow: hidden;
margin-right: 10px;
display: inline-block;
cursor: pointer;
transition: 450ms all;
transform-origin: center left;
position: relative;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.26);
}
.carousel-item .panel1 {
position: absolute;
top: 0;
right: -50%;
width: 45px;
background-color: transparent;
display: flex;
align-items: center;
flex-flow: column;
opacity: 1;
}
.carousel-item:hover .panel1 {
right: 0;
opacity: 1;
transition: 0.4s;
}
.carousel-item .panel1 a {
font-size: 20px;
color: #dbd6d0;
margin: 15px 0;
}
.carousel-item .panel1 a:hover {
color: rgba(255, 255, 255, 0.9);
}
.carousel-item .info {
text-align: center;
line-height: 20px;
margin-top: -10px;
font-family: 'Amita', cursive;
margin-bottom: 10px;
}
.carousel-item .info h3 {
color: #333;
padding-top: 8px;
cursor: pointer;
font-family: danstevis;
letter-spacing: 1px;
font-size: 14px;
}
.carousel-item~.carousel-item {
transform: translate3d(20px, 0, 0);
}
.carousel__container:hover .carousel-item:hover {
transform: scale(1.09);
opacity: 1;
}
.carousel-item__img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0.5px 0.5px 0 rgba(0, 0, 0, 0.26);
}
.carousel__container:hover .carousel-fitem:hover {
transform: scale(1.09);
opacity: 1;
}
.items::-webkit-scrollbar {
height: 15px;
}
.items::-webkit-scrollbar-track {
-webkit-box: inset 0 0 6px rgba(0, 0, 0, 0.26);
border-radius: 10px;
}
.items::-webkit-scrollbar-track-piece {
max-width: 100px;
}
.items::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #fff;
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#dbc9a827), to(#968a753b), color-stop(0.6, #9482672c));
}
.carousel::-webkit-scrollbar {
display: none;
}
#supports(display: grid) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
}
.items {
position: relative;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
transition: all 0.20s;
transform: scale(0.98);
will-change: transform;
user-select: none;
cursor: pointer;
}
.items.active {
background: rgba(255, 255, 255, 0.281);
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
.item {
display: inline-block;
background: rgb(255, 255, 255);
min-height: 300px;
min-width: 100px;
margin: 2em 1em;
}
}

You create several items in your carousel:
<div class="carousel-item">
<img class="carousel-item__img" src=" " alt="img">
<div class="panel1 ">
</div>
After that it depends a lot on the placement you want

Alignment Fix in html/css

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.
Expected Output
Expected Output
How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions would greatly help! Thanks a lot!

My suggestion is to remove the grid and padding from .container1, align the iframe left, and set both left margins to 10%.
Since the iframe is width:80%, 10% on each side will center it. And the matching margin on the top element will align the left edges of the two elements.
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: 10%;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.iframe {
height: 1070px;
margin-left: 10%;
width: 80%;
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Overflow hidden not including border-radius in Safari... sometimes

I have a button with a ripple animation on click.
In Safari the border-radius of the button isn't included with overflow: hidden:
So, I went to make a snippet demonstrating the issue to post here and, for the snippet, it worked:
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
}
.dk__btn > span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>
Anyone have any idea why?
To clarify, it works in all other browsers I've tested.

You need to add webkit mask for safari it work fine. Need to add following css to .dk_btn
-webkit-mask-image: radial-gradient(white, black);
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
-webkit-mask-image: radial-gradient(white, black);
}
.dk__btn>span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>