I am facing an issue with the <h1> tag in my design. The SVG element within it is not appearing on mobile phones when I write a media query for devices with a minimum width of 400px, even though it works fine on screens with a minimum width of 800px.
HTML
<div class="explanation">
<h1>
<div class="goo" contenteditable="true"gt;Elected as a <i>Senior Project Lead</i> at the Biggest Club 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>
CSS
.goo {
font-size: 3rem;
line-height: 1.35;
display: inline;
box-decoration-break: clone;
background: var(--color-highlight);
padding: 0.5rem 1rem;
filter: url('#goo');
color: black;
}
.goo:focus {
outline: 0;
}
On larger screens:
https://i.sstatic.net/2jr1N.png
On iOS device:
https://i.sstatic.net/uA9Kr.jpg
Despite the different layout, why do the edges appear unrounded? Also, where is the break in the SVG element like shown in the first picture? Am I missing something here?