Is -webkit-backface-visibility not working in Chrome today?

Today, I encountered a perplexing issue with my project. It was functioning perfectly yesterday, but today it seems to be malfunctioning. (Yes, I have checked previous versions on git.)

The problem at hand is that some divs that were previously hidden using 

-webkit-backface-visibility: hidden;
have mysteriously appeared. To demonstrate this issue, I have created a fiddle:

http://jsfiddle.net/Js6cg/1/

In Chrome version 23.0.1271.64 m, the div is visible (incorrect behavior), whereas in 25.0.1326.0 canary, it remains hidden as expected.

Could you confirm whether this is a bug in Chrome or if there may be an error in how I am utilizing the CSS?

(It may be worth noting that I updated my GPU drivers from 12.8 to 12.10 today.)

Furthermore, the website demonstrating the effect I have been trying to replicate appears to function somewhat correctly in Chrome stable (aside from disregarding -webkit-perspective and having choppy animations). In contrast, Chrome canary renders it smoothly and recognizes the perspective. This inconsistency has left me puzzled.

google-chromecsswebkittransform

Answer №1

Oh no, how embarrassing!

So here's what happened: I thought I had updated my GPU drivers, but it turns out I never actually restarted Chrome for a while. Because of this, after the driver update, GPU compositing was not re-enabled and some more complex CSS3 effects (like perspective and backface-visibility) weren't working properly. Instead, simple transforms were using a CPU fallback, causing them to look choppy on the demo site.

When I finally opened Chrome Canary after updating the drivers, everything worked fine with GPU compositing. It was strange that one instance worked while another didn't, but the version mismatch wasn't the issue in this case.

A simple restart of Chrome resolved the problem. Time for me to take a short break!

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

Ways to display a block within the visible window by simply clicking on another block

I'm in need of assistance with this issue. Please take a look at the fiddle link below to understand the specific requirement. $(document).ready(function(){ $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-s ...

javascriptjqueryhtmlcss

Using AngularJS to retrieve DOM elements within a directive's controller

Currently, I am in the process of creating a custom image carousel directive using only AngularJS and no additional libraries. simpleCarousel.$inject = []; function simpleCarousel() { var directive = { restrict: 'E', templat ...

javascriptcssangularjs

Utilizing an external SCSS or CSS file with Material UI in React: A step-by-step guide

Encountering issues with external CSS files in my React project that uses Material UI components. Despite creating a CSS file for each component in the react components folder, they fail to load upon hard reloading the site. I prefer using external CSS ov ...

cssreactjsmaterial-uistyles

instructions on incorporating a sidebar into a .NET web page utilizing a master page that lacks a sidebar

I am facing a dilemma regarding adding a sidebar to one specific page of my .net project. The master template does not include a sidebar, so I'm wondering how I can achieve this on just that one page? Here is the code snippet for the Master Template. ...

.nethtmlcss

Seeking assistance with aligning CSS inline elements in Servicenow platform

As a beginner in front-end development, I have created a simple form with 4 fields. My question is how to align all these fields in one line equally divided? Below is the code snippet written in HTML along with the output: <div> <form> & ...

htmlcssbootstrap-4

Triggering hovers inside one div by hovering over another div

Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand... The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on ...

javascriptjqueryhtmlcss

Is it possible to compile all the hidden and exposed posts into a single page?

My current javascript code successfully hides and reveals a sign-up form on my website, but I am facing difficulties when trying to implement the same functionality for multiple forms on a single page. <script type="text/javascript"> jQuery ...

javascripthtmljquerycsswordpress

Make sure to keep Typed.js hidden until the Animate.css animation is complete

To create an engaging webpage, I am leveraging Bootstrap, Animate.css, and Typed.js. The desired effect is to have a blank page initially, then make the navigation bar slide down using animate.css fadeInDown. Once this animation completes, the Typed.js lin ...

javascriptjqueryhtmlcssanimation

Hovering over the <li> element reveals that it does not have an appropriate size

I'm currently utilizing bootstrap and have come across this code snippet: <ul class="dropdown-menu scrollable-menu-brands" style="width:210px;"> {foreach $arr as $id => $r} <li><a class="dropdown-i ...

htmlcsshover

Assigning ng-Attributes using vanilla JavaScript

My journey with coding Angular started not too long ago. I have a HTML structure with various divs and classes. I am looking to loop through these classes and add a tooltip to a specific div within each class. Rather than hardcoding the Angular attributes ...

javascripthtmlcssangularjs

Is there a way to have an image expand to fit the entire screen before scrolling to view another image?

I'm working on a website and I want to have an image that automatically adjusts to fit any screen size. Users should be able to scroll down to see more content or another image. A similar effect can be seen on this site: . Any suggestions would be rea ...

css

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

In a different discussion, it was mentioned that the method used to create a CSS triangle allows for triggering the hover state or click event only when the cursor is inside the triangle. There is a demo provided to demonstrate this with the hover state. ...

javascripthtmlcss

React: Modify the appearance of one component when hovering over another component

Currently, I am delving into the world of React and have come across a piece of code that successfully applies an opaque white overlay over an image when hovering over a button. This functionality is working as expected: class Product extends Component { ...

javascripthtmlcssreactjshover

Scaling down a retina image sprite using CSS: A step-by-step guide

Struggling with loading retina images? You're not alone. Many web developers face the challenge of scaling down high-resolution images effectively. Take, for example, two image sprites: one normal and one retina. The issue arises when you need to adju ...

cssspritescaling

What are the steps to create a scrolling effect for the menu buttons on the mobile version of

When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...

htmlcssjquery-mobilecss-float

Converting two adjacent columns in Bootstrap 5 into two rows on smaller screens: a step-by-step guide

I have recently started using Bootstrap for a project and I want to ensure that my application is responsive on various device screens including normal laptops, iPad Mini (768 X 1024), and iPad Air (820 X 1180). Below is a snippet of my HTML code: <div ...

htmlcssbootstrap-5

Expanding background images smoothly during transition with varying image dimensions

I am looking for a way to have my background-image transition smoothly, even when it has a different aspect ratio predecessor. Below is an example demonstrating this stretching effect. toggle = true jQuery(document).ready(function() { jQuery(".button ...

javascripthtmljquerycss

"Trouble with image height not scaling correctly in Internet Explorer when using the img tag

I am facing an issue that can be observed by visiting this link using Internet Explorer. Interestingly, everything functions perfectly in all other browsers (although Chrome displays little blue squares next to the images for some unknown reason). Here i ...

htmlcssinternet-explorer

Incorporating HTML5 & CSS3: Leveraging various Pseudo classes and the translateX/Y properties

As a graphic designer dabbling in HTML5, I have to admit that coding is not my strong suit. Despite that, I've been able to troubleshoot most of my issues thus far. However, I've hit a bit of a snag. The problem arises when clicking on a thumbna ...

htmlcsstranslatepseudo-class

Maintaining a set margin with a width that can adjust relative to the parent container's size

Is there a way to achieve this layout using only CSS and HTML? I want to create 2 divs, one nested inside the other. The parent div should span 100% of the window width, while the child div should have fixed margins and fluid width filling the remaining s ...

csswidthmarginfixedfluid