Can someone provide an explanation for why CSS filter performance is significantly slower on Safari when using a different order than usual

It appears that the positioning of filter: none; in CSS has a significant impact on speed in Safari. Can someone offer a detailed explanation of what is going on?

Compare the following two examples in Safari only

Example 1: (Having filter: none; at the end of the CSS rule slows down Safari)

Example 1 (Slow on safari)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none; /* IE 6-9 */
}

Example 2: (Moving filter: none; above other browser-specific filters improves performance significantly)

Example 2 (Much faster)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  filter: none; /* IE 6-9 */
  -webkit-filter: grayscale(0%);
}

I've tried researching online for an explanation but haven't had any luck.

I have my own theories, but from what I understand, CSS does not necessarily stop checking other rules upon encountering something like filter: none;.

csssafaricss-filters

Answer №1

Your primary concern lies in how you are implementing the filter: none; property (or, the method by which you are eliminating the previously set grayscale filter). You are correct in noting that:

CSS does not cease checking other rules upon encountering filter: none;?

However, this is precisely where the problem exists! It appears that setting the filter to none requires more resources than simply reverting the grayscale back to 0%!

I came across a statement in the book Pro CSS3 Animation by Dudley Storey that supports this notion:

"Note that you cannot smoothly transition to a state of 'none' or no filter applied; a new value must be assigned to the filter" (Storey, 113)

Thus, in Example 1, Safari interprets the CSS and is left with the laborious task of removing all filters instead of just adjusting the grayscale filter to 0%. In Example 2, Safari encounters -webkit-filter: grayscale(0%); last, making it the CSS rule it enforces (with greater ease).

While I believe this addresses the issue at hand, I welcome insights from those with more expertise. Personally, I find myself unsatisfied because I have been advised to prioritize "generic" CSS tags before custom ones (such as placing -webkit, -moz ahead of other CSS properties). The only guidance I found in Apple Safari Documentation is a vague cautionary message:

Filters are visual effects applied to images and HTML elements... These filters demand resources. Use them judiciously and only when essential. Test your content across various devices to ensure rendering performance remains stable, especially during animations. Source

The simplest (and seemingly most conventional) solution is to eliminate filter:none; altogether, as it serves no purpose when solely removing the grayscale effect.

I trust this explanation proves beneficial, though I apologize for any mistakes given the late hour.

Answer №2

Apply the CSS property to an element by using blur

transform: translateZ(0)

in order to optimize CSS rendering on the GPU

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

Exclusive CSS banner slider glitch - Hyperlinked images unresponsive

.zd-slider { position:relative; overflow:hidden; margin-top: 0px; } .zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} /* Set the width/height of the slide ...

htmlcsscss-animationskeyframe

What is the origin of this extra space?

I'm having difficulty identifying the source of the extra space at the top-front of my first column. It seems like both columns should start on the same line. Let's not focus on the margin values right now. They were set to align the content ...

htmlcss

CSS Filter Generator for full compatibility with Internet Explorer

Looking for suggestions on a CSS generator that supports writing image filter declarations in IE syntax, along with web-kit and filter compatibility. The specific properties I would like to replicate in IE are: filter: grayscale(1) contrast(1) bright ...

cssinternet-explorerfilter

Impact items without the need to individually assign a class to each item

Apologies if this question has already been answered elsewhere...I have been unable to find the solution, perhaps due to my lack of knowledge on how to phrase it. I am attempting to modify list items by setting a class for the ul, eliminating the need to ...

htmlcsshtml-lists

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: https://i.sstatic.net/fIkQr.png Upon inspecting in Chrome developer tools, I noticed that the ele ...

javascripthtmljquerycss

Creating a centered div in HTML for WordPress

<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div> It seems like there is an issue with the styling of the div element. The syntax might ...

csshtml

CSS: When multiple div elements are stacked on top of each other, only the one being hovered over will have

Stacked div elements have a border on hover. However, when hovering over a div, both the hovered div and its parent div get borders. Check out the JS Fiddle here <div class="container"> <div class="button1"> <div class="button ...

css

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

Apply a border to the initial row of the table without relying on an ID or class

My current task involves styling a web application for which we do not have access to the source code. After navigating through the DOM, I realized that the bottom border is being applied to all rows instead of just the first row. #tableID tbody tr td ta ...

htmlcsshtml-tablecss-tables

Alignment of containers on the same level in a horizontal direction

Looking to achieve horizontal alignment of div containers. The container on the left (with a blue border) may have a fixed height. The other two containers (with red borders) should be aligned horizontally to the left blue container regardless of its heigh ...

htmlcsstwitter-bootstrapflexbox

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

I'm seeking guidance on how to convert this jQuery code into pure Javascript. $('.revealedBox').each(function() { if ($(window).scrollTop() + $(window).height() > $(this).offset().top + $(this).outerHeight()) { $(this).addCla ...

javascriptjquerycss

Using Javascript to automatically submit a form when the enter key is pressed

Can anyone help me with a password form issue? I want the enter key to trigger the submit button but it's not working for me. I understand that the password can be viewed in the source code, this is just for practice purposes. <!DOCTYPE html> & ...

javascripthtmlcssenter

Modify the font of all text in a specific column using iTextSharp

For my PDF project, I am taking a string of HTML and using HTMLWorker.ParseToList to add each element to a column. Despite numerous attempts, I have been unable to change the font. I tried adding the font to each element as I add it: el.Font = times; But ...

cssfontspdf-generationitext

What is the best approach to incorporating two distinct grid layouts within a single section?

I am attempting to replicate the header-graphic navigation found on this website: It appears that they are not using a grid for the header-graphic area, but rather keeping them separated as 2 divs within their Hero block container. I am interested in recr ...

javascriptjquerycssgrid

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

cssangular

Time whizzes by too swiftly

After attempting to create an automated slideshow with clickable buttons, I encountered a problem. The slideshow functions properly, but as soon as I click one of the buttons, the slideshow speeds up significantly. This is what I implemented in my attempt ...

javascripthtmlcss

The logo is missing from the navigation bar on my website, which is built

I am facing an issue while building my website - my logo is not appearing. I included a h1 tag within the same div, which shows up along with the logo beneath it. However, when I delete the h1 tag, the logo also disappears. Can anyone help me figure out wh ...

htmlcsstwitter-bootstrap

Arranging two buttons in the footer of a Bootstrap card

I'm currently working with a Bootstrap Card element that includes two buttons in the footer section. My goal is to position one button at the absolute center of the footer, while having a smaller button aligned to the left side of the footer. Addition ...

cssbootstrap-4

I'm struggling to make my div display inline

My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...

htmlcss

Centralize Arabic symbol characters

Is it possible to center the symbols that by default go above characters such as مُحَمَّد? .wrapper { text-align: center; vertical-align: center; } span { font-size: 4rem; display: inline-block; padding: 2rem; margin: 0.2rem; ba ...

csstwitter-bootstrapbootstrap-5