Unusual CSS columns glitch discovered

While experimenting with columns, I noticed a peculiar issue when I added a hover-over image.

The hover effect works fine on the left side of the column but is disabled on the right side.

I thoroughly reviewed my code and layout but could not detect any errors.

Has anyone encountered this problem before? If so, were you able to find a solution?

You can view the jsfiddle here.

CSS:

.column {
    margin-top: 5%;
    -moz-column-count: 2;
    -moz-column-gap: 30px;
    -webkit-column-count: 2;
    -webkit-column-gap: 30px;
    column-count: 2;
    column-gap: 30px;
}
img.grayscale {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease;
    /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden;
    /* Fix for transition flickering */
    clear: both;
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
}
img.grayscale:hover {
    -webkit-filter: grayscale(10%);
}

HTML:

<ul class="column">
 <li>text...</li>
 <img class="grayscale" src="http://i57.tinypic.com/2i9p8go.jpg" width="80%" height="auto" />
 <li>...text</li>
<ul>

EDIT 01 @Richard Parnaby-King suggested removing 

-webkit-backface-visibility: hidden;
, which helped somewhat. However, there are still issues if the cursor hovers rapidly back and forth over the image. Continued search for a solution.

htmlcsshtml-listscss-multicolumn-layout

Answer №1

It seems like the issue stems from the following line in the code:

-webkit-backface-visibility: hidden;
/* This is added to prevent transition flickering */

Upon removing this line from the jsfiddle (http://jsfiddle.net/k8s4j6db/1/), the hover effect functions properly.

As for why it interferes with the hover effect, I am unsure of the exact reason.

Answer №2

I have been noticing a trend of somewhat related posts regarding issues with webkit and hover effects, but unfortunately none of the suggested solutions seem to be working for this particular problem.

After some trial and error, I have devised a JavaScript snippet that appears to resolve the issue:

var images = document.querySelectorAll('img');
for (var j = 0; j < images.length; j++) {
  images[j].style.width = images[j].clientWidth + 'px';
}

This code seems to "awaken" the images to the hover event, fixing the issue at hand.

JSFiddle Link

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

Basic CSS3 animation

I seem to be having trouble making the transition effect work in this piece of code I want to change the text alignment from left to right, but it's not working. The code is very simple. <style> /* Default State */ div { background: green; ...

csstransition

Steps to align an image in the center using position fixed:

I'm attempting to align an image with a fixed position in CSS. Here is the code I tested: <style> .bgimg { top: 50%; left: 50%; position: fixed; opacity:0.09; marging: auto; } </style> For more information, you can vi ...

css

css: varying container heights for columns in Chrome and Safari using Bootstrap 4

In my code snippet below (this is just a prototype, in the actual application everything is different but follows a similar structure): <body> <div class="row"> <div class="col-3 d-none d-sm-block"> <div class="h-1 ...

htmlcssflexboxbootstrap-4

Exploring the Functionality of HTML Anchor Link Fragment within Angular 6

I've been working on an Angular 6 project where I've disabled the hash-location-strategy, removing # from the URL. As a result of this change, a link like: <li routerLinkActive="active"> <a [routerLink]="['/settin ...

htmlangularroutesanchorhash-location-strategy

Adding a dynamic gif over an image in an HTML email through Outlook

I'm struggling with overlaying a gif image on top of a jpeg in an HTML email, but for some reason it's not functioning as expected. Below is the code I've been examining: <table id="headerAnimation"> <!--[if !mso]><! ...

htmlemailoutlook

What is the best way to merge two values with the same property in an object using a comma as a separator

Is it possible to combine the values of properties with a separator in my scenario? Here is an example of my JSON structure: { "name": "aa", "name": "bb", "name1": "cc", "name2": "dd" } I am looking to display the values of the key 'name&apo ...

javascriptangularjshtml

Name of Document (changing from php to ?)

Greetings! Currently, I am utilizing PHP to include the document name as an example. folder/<?phpecho basename(__FILE__, '.' . pathinfo(__FILE__, PATHINFO_EXTENSION));?>_button.png I have observed that using PHP for this purpose and havin ...

phpjavascriptjqueryhtml

How can Chrome's display:none latency be eliminated?

My Chrome extension is designed to alter a third-party web page by removing a button and adding two new HTML elements. The process involves observing the URL of the current tab and executing an HTML injection if it matches the specified regex pattern. Desp ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Sticky positioning and outline effects

I have been working on creating a scrollable list with "sticky" headers. The functionality seems to be in place, but there are some visual glitches that I've encountered. The list itself is structured using a ul element styled with the Bootstrap 5 cl ...

htmlcsstwitter-bootstrapbootstrap-5

What's the best way to adjust the height of a textarea to completely fill the column?

Currently, I am in the process of creating a simple contact form using Bootstrap-4. The layout consists of 1 row with 2 columns: the left column contains input text fields and selection menus, while the right column includes a textarea. The challenge I&apo ...

htmlcssbootstrap-4flexbox

Enclose every line of the paragraph within a <span> element

My <div> element is configured to display a paragraph without any line breaks, similar to the example below: <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dum ...

javascriptjqueryhtml

Three fixed position divs arranged horizontally side by side

I am attempting to organize 3 divs in a row using Flex. ISSUE 1: The div that is centered is set with position: fixed. However, the two other divs on each side do not stay aligned with the centered fixed div when scrolling. If I change the centered div to ...

javascripthtmlcss

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

javascripthtmlcss

No action when clicking JQuery-ui Dialog button on IE11

I created a form using the following HTML structure: <div id="dialogGlobal" title="About You"> <form> <fieldset style="border: none;"> <ul style="list-style-type: none; padding-left: 0px"> <li><lab ...

javascriptjqueryhtmlinternet-explorerjquery-ui-dialog

Elements refuse to show up in a single line

I've styled two div elements with the properties below: .elem1 { width: 47.5%; margin-right: 2.5%; display: inline-block; } .elem2 { width: 47.5%; margin-right: 2.5%; display: inline-block; } Note: When I decrease the margin ...

htmlcss

Offset & Centralized Container using Bootstrap

I am currently attempting to center the header and input field using bootstrap. Unfortunately, I am facing an issue where I cannot get the input field to align properly with the header. If anyone has an alternative method for achieving this alignment, I ...

htmlbootstrap-4

Exploration of JavaScript Interview Questions

I need help creating a JavaScript function that will be triggered on button click, but instead of targeting the button directly, it should target a div element by its class. How can I achieve this? <body> <div class="content"> <butto ...

javascriptjqueryhtml

Ways to prevent browser scrolling on smartphones and tablets

Having a simple HTML file with an iframe embedded, I have been attempting to prevent my browser from scrolling in both documents. However, this solution works intermittently and does not provide consistent results. I have tried applying various event list ...

javascripthtmlweb-applications

ReactJS does not trigger a re-render when changes are made to CSS

I'm curious about the reason why ReactJS does not automatically reapply CSS to child components even when componentDidUpdate() is called. I conducted a small demo where adding a new box doesn't change the color of existing boxes, even though the ...

javascriptcssreactjs

Intersection Observer API is not compatible with the functionality of the navigation bar

Having trouble with the Intersection Observer API. Attempting to use it to show a nav-bar with a white background fixed to the viewport once it scrolls out of view. Initially tested using console.log('visible') successfully to determine visibili ...

javascriptcssintersection-observer