I have a problem with VH properties on different mobile browsers

Design help General
1

So I took these screenshots from a Samsung note 9 using Opera browser and the second is an iPhone 11 using Safari, notice the arrow at the bottom looks good when using Samsung but not when using iPhone. It’s set to absolute 10vh from the bottom and the top is set to auto, I also tried using % but that didn’t help.

Samsung

Screenshot_20210303-121946_Opera
Screenshot_20210303-121946_Opera720×1480 127 KB

iPhone

Snapchat-1939202693
Snapchat-1939202693828×1792 69.8 KB

Here is my site Read-Only link

2

Is there a way to set different properties for different browsers?

3

Having the same problem. Works great in Brave Browser but Safari gets cropped off at the bottom. Would love to know if there is a solve.