Elements acting weird in Chrome but not in Firefox? - html

Question

So I was building a website using HTML and CSS along with some JS. My main browser has always been Firefox and the website looks perfect on it as well. However, after opening it in Chrome, I noticed a lot has changed.
The fonts appear different: I tried CSS resetting and other known techniques, but I do not know why the fonts appear to be changed. What would you guys suggest in solving this issue?
An entire element does not even appear on Chrome and I am totally confused as to why or how that can happen.
Code:
HTML
<div class="masked-copy texture-orange big-type">
<p><span class="firstline">Coffee </span><span class="secondline">'N'</span> <span class="thirdline">Code!</span></p>
<!--
-->
<div class="explanation">
<h1>
<div class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</div>
</h1>
<!-- Filter: https://css-tricks.com/gooey-effect/ -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
</div>
</div>
CSS
.texture-orange {
color: #e5895f;
background-image: url('https://www.apple.com/v/iphone-xr/a/images/overview/copy_texture_4_large.jpg');
}
.big-type {
/* Copied almost wholesale from the Apple site CSS; changed the font-stack */
font-size: 60px;
height: 60vh;
line-height: 1.0625; /* The height Apple used to tighten up the spacing a bit. */
font-weight: 600; /* Nice, chunky, bold! */
font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
}
.masked-copy {
/* This is it! Magic: */
-webkit-background-clip: text;
color: transparent !important;
}
.project3 .goo{
position: relative;
top: -160px;
left: -30px;
}
.project3 .explanation .goo #newline::before{
content: '\a';
white-space: pre;
}
As seen on Firefox
As seen on Chrome

Answer 1

You have to nest the <h1> tag into the <div> tag:
<div class="masked-copy texture-orange big-type">
<p><span class="firstline">Coffee </span><span class="secondline">'N'</span> <span class="thirdline">Code!</span></p>
<!--
-->
<div class="explanation">
<div>
<h1 class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</h1>
</div>
<!-- Filter: https://css-tricks.com/gooey-effect/ -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
</div>
</div>
Also, your code doesn't match the picture