CSS Code to increase the backdrop-filter: blur(px); for iPhone users.

Here is the code I am using:

@media screen and (max-width: 640px) 
{
  #block-yui_3_17_2_1_1633441099136_6823
    {
      background-color: rgba(255,255,255,.2)!important;
      backdrop-filter: blur(15px);
    }
}
@media screen and (max-width: 1024px) 
{
  #block-yui_3_17_2_1_1633441099136_6823
    {
      background-color: rgba(255,255,255,.2)!important;
      backdrop-filter: blur(15px);
    }
}
@media screen and (min-width: 641px)

{
  #block-yui_3_17_2_1_1633441099136_6823
    {
      background-color: rgba(255,255,255,.2)!important;
      backdrop-filter: blur(15px);
    }
}

This works for the desktop view, and every phones browser EXCEPT an iphone. It will blur the background, but not as much as I specify in the code. Here is an example. Android is the first SC, iPhone is the second SC. I have tested with multiple generations of iPhones with varying screen sizes. Is there any other code I can try to accomplish this? Thanks!