Why the blur effect is not working on the UWP WebView app on XBOX?

Copper Contributor

Currently, I'm trying to use my web source URL to develop an UWP webview app on VS2022.


In my web source URL we're using the different stylings for dir='rtl' for arabic language so when I run the code on the normal browser everything is working fine. But when I run it on XBOX using the local/remote machine method the 'rtl' styles are not working as expected.

I've tried making a lot of changes to CSS but still facing the issue with the styling part used by the dir='rtl'. All the text is shown from right to left but the image styles for -webkit-mask-image is not working as expected.


This is working as expected on the edge browser but not on the XBOX UWP WebView app.


@include rtl(
  -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 1) 25%),
  -webkit-linear-gradient(right, transparent, rgba(0, 0, 0, 1) 25%)
@include rtl(
  linear-gradient(right, #060011 34%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0) 0%),
  linear-gradient(left, #060011 34%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0) 0%)

Here the styles were given as the image should get blurred on the right side and should visible properly on the left side. But when I run this on local/remote machine the total image is getting blurred.


Is there any work around that can be used to make this property work as expected.

0 Replies