[FIX] Backdrop-Filter Blur Issue in Safari for Loader Component

[mayank-dev07]

Description

The backdrop-filter class used in the loader component is not working in Safari due to compatibility issues. Safari requires the use of the -webkit-backdrop-filter CSS property for proper functionality. The blur effect in the loader component needs to be applied using the -webkit prefix to ensure cross-browser compatibility.

Tasks

1. Analyze the current implementation of the backdrop-filter class in the loader component.
2. Add the -webkit-backdrop-filter property to support Safari:
   • Apply the blur effect using -webkit-backdrop-filter for Safari compatibility.
3. Test the fix across browsers:
   • Ensure that the blur effect works on Safari as well as on other browsers like Chrome, Firefox, and Edge.
   • Test on both desktop and mobile versions of Safari.

Additional Information

• Ensure that adding -webkit-backdrop-filter does not break functionality in other browsers.
• Maintain consistent styling and functionality across all supported browsers.
• Provide detailed commit messages that explain the changes made to support Safari compatibility.

Expected Outcome

The loader component should properly display the blur effect on Safari browsers by utilizing the -webkit-backdrop-filter property, ensuring a consistent visual experience across all browsers.

[PrayanshParmar]

@mayank-dev07 Please assing me this issue.

[mayank-dev07]

go ahead @PrayanshParmar

[PrayanshParmar]

I would like to withdraw this task