Troubleshooting problem of opacity rendering with gsap animation on SVG files

Having an issue with this website:

This site is primarily built using SVG and animated with the GSAP library.

Unfortunately, I'm experiencing some rendering issues on Chrome, including the latest version.

You can see an example image here:

As seen in the background triangles, the opacity is not properly rendered on the left side but appears fine on the right...

It seems like Chrome may be having trouble rendering opacity attributes on certain computers, as if it requires more memory or CPU power...

How can I go about debugging this issue? Any insights into what might be happening here would be greatly appreciated!

Thank you in advance!

cssgoogle-chromesvgopacitygsap

Answer №1

One solution is to simply delete the will-change: opacity; line from the CSS for #app #particles-js {}.

I have been trying to recreate this issue in a simplified example but have been unsuccessful so far. There may be other factors at play, possibly related to scripts, that are causing the bug.

If you could provide a broken version of your site and report the issue to the Chrome team at , they would greatly appreciate it.

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

Guide to making a mobile number input field with a constant country code

I'm struggling to create a mobile input box that separates the mobile number and country code with a divider or fixes the country code in the field without success. Something similar to this image: https://i.sstatic.net/6HwYdZrB.png But I don't ...

htmlcssbootstrap-4

Having trouble getting the header div to span the entire screen

I'm currently working on a project where I have set the header div to 100% width and the main container to also be 100% width. However, I am facing an issue where the right and left sides of the header are not filling the entire space. I managed to fi ...

htmlcssheightwidth

How can I use jQuery to prevent a click function from running when input fields are left empty

I have step cards with input fields on each card. A "Next" button is provided for each card to change the view. However, I need to prevent the "Next" button from functioning if any input fields on the form are left empty. Below is the code snippet: va ...

javascriptjqueryhtmlcss

Can you explain the intended function of .reference in the CSS code provided?

Currently delving into some sample HTML from codrops. I came across the following CSS styling. After scouring the web, it seems others have used span.reference, but I can't seem to grasp the purpose of .reference. Any insights would be much appreciat ...

cssmenu

When the browser is resized, the fadeIn() function restarts from the

My plan was to create a dynamic effect where a browser-sized div would rotate through 3 different backgrounds using jQuery's fading effect. However, I encountered an issue - whenever I resize the browser window, the effect restarts from the beginning ...

javascriptjqueryhtmlcssfadein

Create a DIV element that completely fills the vertical space available

My webpage is currently looking quite empty, with only one DIV element present: <div style="height: 20%; min-height: 10px; max-height: 100px; width: 100%; background-color: blue;"></div> I' ...

csshtml

Is it possible to have CSS handle only horizontal overflow?

Can CSS 2.1 be used to achieve horizontal overflow only? overflow: auto; If this code will result in both vertical and horizontal scrollbars for a block element, is there a way to display only horizontal scrollbars (for example, within a <div>)? Ho ...

htmlxhtmloverflowcss

Move the first column to the right using BS4

Currently, I am working with bootstrap4 and facing an issue where I need the first div column to float right on medium devices and above. However, on mobile devices, it should be shown first. This was easily achievable in bootstrap3 using a structure lik ...

cssbootstrap-4

Display a series of elements in rows using styled-components

Here is a simple array that I need help rendering into a grid structure. Currently, the array is displayed like this: HAMDDN I want each element to be on a new row like so: HA MD DN Any suggestions on how to achieve this? Below is the full code. I am ...

javascriptcssreactjsstyled-components

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Chrome is the only browser displaying background images

My current issue is that the background image only appears on Chrome and not on Firefox or Edge. I am trying to have a different background image each time the page loads. $(document).ready(function() { var totalBGs = 5; var rnd = Math.floor(Math.ran ...

jquerycssgoogle-chromefirefoxmicrosoft-edge

Display of CSS color choices organized by row input

Is it feasible to dynamically color each table row based on the input in a designated column for that row? For example: B1 = 1 // Red row B2 = 1 // Red row B3 = 3 // Blue row B4 = 2 // Green row B5 = 1 // Red row And so forth? The datatable wi ...

csscolorsstylingcss-tables

When the React js application is opened in a hosted environment, the CSS styling may be overridden

My React js application is hosted within another application. When a jQuery dialog opens, the React application also launches. While the functionality works correctly, some of the CSS styles are appearing incorrectly. I suspect that either the CSS from the ...

javascriptjquerycssreactjs

Adjust SVG Checkbox to eliminate any unnecessary padding

I am attempting to customize the MUI5 checkbox CSS fields, and here is the current status: https://i.stack.imgur.com/BROpS.png These are my CSS classes: MuiCheckbox: { styleOverrides: { root: { ".MuiSvgIcon-root": { backgro ...

htmlcsssvgmaterial-ui

Seeking guidance on utilizing jQuery to trigger changes in CSS properties upon

Just starting out with jQuery and hoping to find an easy script (or maybe a more straightforward approach) that allows for changing the CSS property of one element when another element is hovered over. For instance, hovering over this image could cause th ...

jqueryhtmlcsshover

How can I display random images in the gallery?

I am looking for a gallery that is similar to the one in this provided link: The codes seem too complex for me to figure out on my own. Thank you ...

javascriptjquerycss

Can you provide step-by-step instructions for creating a customized CSS dropdown menu?

Need some help with my code. I have a header that I don't want to change much, but I'd like to add a dropdown menu without using a list. Here's my code: <!-- Navigation Bar --> <div class="navbar"> <div class="button_l"& ...

htmlcssdrop-down-menumenu

Can changes made to an element's style in Firebug be automatically applied to the unminified CSS/LESS files?

Is it possible to efficiently modify a page with minified stylesheet and see the changes reflected back in the source code using smart IDEs, F12 tools, and 3rd party plugins or software? I typically create basic CSS, test it on the browser, tweak styles u ...

htmlcssfirebuggoogle-chrome-devtools

I'm puzzled as to why the color of my top border isn't displaying even though I've correctly implemented the border

Struggling to make the top border of my div change color. I've double-checked the syntax, and it all looks correct. border: 1px solid white; border-top-color: red; ...

htmlcss

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

htmlcssstylesdisplay