SVG gets cut off on iOS Safari and Chrome

I ran into a strange issue last week and I want to put it out there, in case someone else needs help with it.

My SVG logo was getting cut off on iOS devices when seen from Safari and Chrome. It seems to happen only on mobile devices.

It looked something like this:

As it turns out the issue was with SVG itself, it uses <g clip-path=”url(#clip0)”> to wrap the content of the SVG and on mobile devices was messing with the file.

I ended up removing the <g> wrap and the <clipPath> that is referenced in the SVG file.

Before:

					

<svg width="280" height="51" viewBox="0 0 280 51" fill="none" xmlns="http://www.w3.org/2000/svg">
	<g clip-path="url(#clip0)">
		<path d="" fill="white"/>
	</g>
	<defs>
		<clipPath id="clip0">
			<rect width="280" height="50.5533" fill="white" transform="translate(0 0.446777)"/>
		</clipPath>
	</defs>
</svg>

After:

					

<svg width="280" height="51" viewBox="0 0 280 51" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="" fill="white"/>
	<defs>
	</defs>
</svg>