Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property:

background-blend-mode: luminosity

An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the screen. This issue can be resolved by removing background-blend-mode (make sure to remove it twice if testing with the debugger, as it is present twice in the CSS rules on the body). Once removed, the flickering ceases.

Here is an example of how it appears:

https://i.sstatic.net/vrWya.jpg

We are currently using Chrome 62 on OSX, but have observed this issue on other versions as well.

cssgoogle-chromebackground-blend-mode

Answer №1

Struggling with Chrome when trying to use the background-blend-mode on bigger containers like 

<body>

Remove it from there and insert it into your hero-section

.hero-section{
    background-blend-mode: luminosity;
}

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 keep an image centered in the nav-bar as it decreases in size?

As I work on building a website using a template (https://github.com/learning-zone/web-templates/tree/master/victory-school-free-html5-bootstrap-template), I encountered an issue with the navigation bar. The original design appears like this: Before shrin ...

javascripthtmlcss

confirmation box for deleting a row in a grid view

I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gr ...

javascriptcssasp.net

Is there a glitch in my CSS code or am I simply misunderstanding how to center a div?

After doing some research, I noticed that all the tutorials I came across recommended following the same steps. However, when I implemented the code below: .center{ width: 50%; margin: 0px auto; } It centered all six items but didn't align them in 3 ...

htmlcsstwitter-bootstrap

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

javascripthtmlcss

What is the best way to design a responsive menu that is perfectly centered?

I'm facing challenges with designing a menu that includes 4 items, needs to be centered next to each other with spacing in between, and should stack vertically on mobile devices. The desired look for the menu can be viewed in this image... https://i. ...

css

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

javascripthtmlcssflashswfobject

You can eliminate the display flex property from the MuiCollapse-wrapper

Having trouble removing the display flex property from the MuiCollapse-wrapper, I did some research and found the rule name for the wrapper in this link https://material-ui.com/api/collapse/ I have been unsuccessful in overwriting the class name wrapper t ...

javascripthtmlcssreactjsmaterial-ui

Arrange two input fields side by side if the quantity of input fields is unspecified

I am currently in the process of developing a project using Angular. I have implemented an *ngFor loop to dynamically add input fields based on the data retrieved from the backend. Is there a way I can ensure that two input fields are displayed on the same ...

htmlcssangular

What could be causing this unexpected delay?

I have been working on improving the load time of my website as it was quite lengthy, but even after optimizations, I am facing issues specifically with the jQuery UI CSS images. If you could spare a moment, would you mind taking a look at this Pingdom te ...

csspathdelayload-timepingdom

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

For a while, I have been using the bootstrap dropdown code as a template and it was working perfectly fine. However, after ensuring everything is up to date, all my dropdowns have suddenly stopped working. Even when I tried pasting the bootstrap code dire ...

htmlcssbootstrap-4

Creating a CSS layout where a square remains confined within another square even as the screen size changes can be achieved by implementing specific styling techniques and

I have a group of squares that I want to resize proportionally when the screen size changes, but they keep overlapping instead HTML <div id="Container"> <div id="smallSquare1">square 1</div> <div id="smallSqu ...

htmlcss

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing: At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenu ...

htmlcsshtml-table

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

javascripthtmlcssreactjs

Surprising <body> body movement caused by child's margin-top pushing it down

Whenever I come across HTML problems, they seem so simple that I almost feel silly asking about them. But here I am, clueless about why this issue is occurring. In the following fiddle http://jsfiddle.net/o5ee1oag/2/, the body is being pushed down by a 50 ...

htmlcssmargin

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the ...

htmlcssbutton

Responsive design issues with Bootstrap 3 box layout

I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the b ...

javascripthtmlcssbootstrap-4responsive-design

<p> The box is massive, and its size is a mystery to me

https://i.sstatic.net/xPoDz.png Why is the box around my paragraph tag so large? I suspect this could be why I am unable to move the <p> tag down with margin-top: 50px; .train p { margin: 0; font-size: 2.5vw; } <div class="train"> < ...

htmlcssparagraph

Trigger the datepicker to open by clicking anywhere within the TextField in MUI

I am trying to enhance my date picker functionality by displaying it when users click anywhere within the field, not just on the calendar icon. Below is the picker: https://i.stack.imgur.com/mrAui.png export function DatePickerField(props) { ...... ...

cssreactjsmaterial-uiweb-frontend

Make sure the navigation bar is fixed to the top of the page only

Looking for a solution to stick the navigation menu to the top of the screen only when the screen is wider than 782px. Progress so far: https://jsfiddle.net/ah4ta7xc/1/ Encountering an issue where there is an unintended gap at the top when applying the s ...

jqueryhtmlcss