The backdrop-filter in tandem with mask-image is not functioning as anticipated on the Chrome browser

I am facing an issue with the interaction of the mask-image and backdrop-filter attributes on Chrome v116.

My goal is to create a gradient-blur effect over text. While this works correctly in Firefox, Chrome only displays a solid white block.

This is how it appears in Firefox v116:

https://i.sstatic.net/ltqIl.png

However, this is how it shows up in Chrome v116:

https://i.sstatic.net/oE584.png

Here is the code snippet I am using:

<div class="gradient-blur" *ngIf="checkOverflowBlurGradient(container)">
</div>

.gradient-blur {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  mask-image: linear-gradient(to bottom, transparent, #F8F9FA);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #F8F9FA);
  opacity: 1;
}

I consulted caniuse.com and found that Chrome v116 should support these properties according to the documentation.

Now I am trying to determine whether this issue is browser-specific or related to my implementation.

htmlcsslinear-gradients

Answer №1

I managed to resolve the issue on my own. It seems that using backdrop-filter alongside mask-image may not provide consistent results across all browsers. Instead, I experimented with mask: conic-gradient and achieved a more uniform outcome, which is definitely an improvement from my previous method.

Below is the code snippet I implemented:

.container {
  border: 1px solid red;
  width: 500px;
  height: 250px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 10px;
}

.text {
  text-align: center;
}

.text {
  display: flex;
  mask: conic-gradient(from 90deg at 0px 0px, #0000 25%, #000 0) 0px 0px,
    linear-gradient(#000 70%, #0000 95%);
  -webkit-mask: conic-gradient(from 90deg at 0px 0px, #0000 25%, #000 0) 0px 0px,
    linear-gradient(#000 20%, #0000 95%);
}
<div class="container">
  <div class="text">
    Lorem ipsum dolor sit amet... // (content truncated for brevity)
  </div>
</div

Additionally, here's a link to a corresponding CodePen for reference.

Answer №2

Interestingly, I found a workaround for this issue in Chrome by actually deleting the overflow: hidden from the container. It's strange that the overflowing text in your samples might present difficulties without it, and I'm puzzled as to why it functions in your CodePen despite having an overflow. 😕

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to achieve a Clamp-To-Border effect on a Texture loaded onto an Image in the THREE.js?

My scene includes a plane with an image loaded onto the texture. I've found that there is no Clamp-To-Border option for textures, only Clamp-To-Edge, Repeat Wrapping, and Mirrored Wrapping. Below is an image displaying the default ClampToEdge effect. ...

javascripthtmlimage-processingthree.jsbase64

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

How to choose a particular Excel spreadsheet in Angular before importing the file?

I am currently working on a new feature that allows users to choose a specific Excel worksheet from a dropdown list before importing a file. However, I am facing some difficulty in adding the worksheet names to the dropdown list. Right now, I have placehol ...

htmlangularexceltypescriptfrontend

Tips for combining text and variable outcomes in printing

I created a calculator that is functioning correctly and displaying results. However, I would like to include a text along with the results. For example: You spent "variable result" dollars in the transaction. Currently, the results are shown only after ...

javascripthtml

Execute AJAX request for two individual buttons

I have a scenario where I want to use two buttons to open separate PHP pages, but I would like to trigger both buttons with a single function. The AJAX function should then determine which button was clicked and open the corresponding PHP page - for exam ...

javascriptphphtmljqueryajax

Styling a fixed sidebar in Vue.js

I am currently working on a layout design that includes a fixed sidebar on the left side, positioned beside a container with its own grid structure. Utilizing Vue.js means each template contains <div> elements where I attempt to incorporate additiona ...

htmlcssvue.jsgridsidebar

Looking to rearrange the layout of jqgrid

I need to reposition the jqgrid away from its default top left position. I have attempted some adjustments but they are not working as expected. Below is the code snippet for your review and suggestions: Here is the HTML code snippet: <div> &l ...

jqueryasp.netcssjqgrid

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

htmlcsstwitter-bootstrapmedia-queries

Running a PHP MySQL function with Onclick without using POST data

I am seeking to trigger a MySQL search using an ONCLICK event in PHP. Initially, I considered utilizing a JavaScript or jQuery function to parse the selected ID through JS. However, I am unsure of how to re-execute the PHP to conduct a new search on the d ...

javascriptphpjqueryhtml

Display a label upon hovering over an image

Is there a way to create an effect where upon hovering over an image, a pop-up image is displayed like this: https://i.sstatic.net/OloUH.png Any suggestions on how I can achieve this using HTML and CSS? Thanks in advance! ...

htmlcss

Token Error in Angular App

I've encountered a sudden issue with my leaflet map. Every time I click on the map, a marker is added to the same coordinates despite my efforts to remove them using a function. Even though the markers-array is emptied, the markers remain visible on t ...

javascriptangularjshtmlleafletangular-leaflet-directive

Is there a way to ensure that my background color extends across the entire webpage background?

I'm curious about how to make sure that the background color of sections 1 and 2 fills the entire webpage, similar to this example. Currently, the background color only covers half of the webpage, but I want it to extend across the entire background o ...

css

The conversion of XML to HTML using setQuery(QString) in QXmlQuery is unsuccessful

Whenever I use the method setQuery(QUrl(file.xsl)), it functions properly. However, if I first load the file into a QString and then invoke setQuery(theString), the subsequent evaluateTo() operation fails (resulting in a boolean exception and empty result) ...

htmlxmlqtxsltqxmlquery

ensured maximum height of a div attached to the bottom

<body style="width: 100%; text-align: center;"> <div style="margin: 0 auto;">container <div style="width: 200px; margin-top: 100px; float: left;"> left </div> <div style="width: 728px; floa ...

csshtml

Mastering the art of seamlessly merging the gradient in the foreground with the background

I want to achieve a unique rainbow gradient effect using only CSS, overlaying it on top of an existing background. The main objective is to make the rainbow fully opaque at the center and gradually transparent towards the edges, seamlessly blending with th ...

csscss-mask

Create a dynamic MUI icon that adapts to different screen sizes

Struggling to make the MUI DeleteIcon responsive and clickable. <ListItem> <ListItemAvatar> <Avatar src={sprites.front_default}> <ImageIcon /> </Avatar> </ListItemAvatar> <ListItemText pr ...

htmlreactjsmaterial-uiicons

Modify the parent div's style if there are more than two children present (CSS exclusive)

Is there a way to use the same class, like .outer, for both divs but with different styling for the parent element when there are more than two children? Kindly refer to the example provided below: .outer1{ border: solid 6px #f00; } .outer2{ b ...

htmlcss

Securely Upload Files with JavaScript

Are there any methods to utilize javascript or ajax for encrypting file uploads securely? If so, could you provide a sample code snippet or direct me to a functional example? ...

javascripthtmlfileencryptionupload

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

Is there a way for me to place my list item onto the following available line?

Here's the code I'm working with: .bottombarelementL { display: inline-block; margin-right: 10px; transition-property: all; transition-duration: 1s; float: left; margin-left: 20%; } .bottombarelementL:hover { display: inline-blo ...

htmlcssforms