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!