When hovering over the second and third columns, the images mysteriously vanish and reappear

UPDATE: Currently happening in Chrome browser.

I am facing an issue with my masonry layout which has multiple columns.

The Problem: Whenever I hover over any image in the second or third column and stretch the browser, the image disappears temporarily.

For example: Here's Jennifer Aniston (The woman in the middle of the second row disappears on hover).

https://i.sstatic.net/F6rCb.png

Desired result:

https://i.sstatic.net/OPabP.png

JSFiddle link for easy reference: https://jsfiddle.net/RohitTigga/3bvdhozc/2/

Code snippet below:

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.wrapper {
  width: 92.5%;
  padding: 1em;
  margin: 0 auto;

}

.masonry {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  -moz-column-fill: initial;
  -webkit-column-fill: initial;
  column-fill: initial;
}
.masonry .brick {
  margin-bottom: 30px;
}

.masonry .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

  //with react
  margin: 20px 0px;

}

.masonry .brick:hover img {
  //opacity: .75;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.masonry.bordered {
  -moz-column-rule: 1px solid #eee;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  -moz-column-gap: 50px;
  -webkit-column-gap: 50px;
  column-gap: 50px;
}
.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}
.masonry.gutterless {
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}
.masonry.gutterless .brick {
  margin-bottom: 0;
}

@media only screen and (min-width: 1024px) {
  .wrapper {
    width: 80%;
    padding: 2em;
  }

  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .wrapper {
    width: 85%;
    padding: 1.5em;
  }

  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

HTML Below:

<div class="wrapper">
    <h1 class="FredokaOne quote">Life's too short to wear boring clothes.</h1>

    <div class="masonry">
        <!-- Images go here -->

    </div>
</div>

Need help fixing this issue? Please advise!

javascriptjqueryhtmlcss

Answer №1

The issue arises when transitioning from no property to transform: scale(1.1). A transition requires two values to define the initial and end states, causing a strange flickering and disappearing effect on images when the transition alternates.

For a solution, refer to the updated code in this revised fiddle.

To resolve the issue, include the following code in your .masonry .brick img class:

.masonry .brick img {
  /* transition properties */

  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1); 
}

I hope this helps resolve your problem!

Cheers.

UPDATE: There seems to be a bug in Chrome where using columns with scaled containers behaves as if overflow: hidden is active, cutting off the image at the wrapper's limit defined by the columns.

A workaround I discovered was to add 

-webkit-backface-visibility: hidden;
to the .masonry class like so:

.masonry {
    -webkit-backface-visibility: hidden; /* workaround for the issue */
    backface-visibility: hidden; /* possibly not necessary */
}

Refer to the updated fiddle for more information. NOTE: The previous link provided was incorrect.

Answer №2

To solve the issue, simply add overflow: auto; to the .brick element (which is the parent of the image). This should fix the problem even on the latest version of Chrome as of 7/1/2017. Keep in mind that using overflow: visible; will not provide the desired result. I faced the same issue and this workaround worked for me, hopefully it will work for you too.

https://i.sstatic.net/5Fyir.jpg

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

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

I could really use some assistance. Admittedly, my knowledge of php, js, jquery, and similar languages is limited. I am currently working on a small web application where users fill out a form with specific requests, the data is then stored in a database, ...

javascripthtmljqueryreplacewith

The problem with asynchronous requests in Ajax

In the code below, I have noticed that when an alert() box is used and then clicked, the content loads on the page. However, without the alert() box, the content does not load. I've tried researching 'Ajax' requests extensively but still can ...

javascriptjqueryajax

What causes the Next 13 App to reload when the route is changed?

I am currently working on the Next 13 Application and facing an issue where clicking on navigation links from the sidebar changes the route, but unfortunately, the application is getting reloaded. It should ideally replace the component directly without re ...

javascriptreactjsnext.jsnext.js13next-router

Hide default content upon clicking tabs in CSS

I am in need of a solution that must be achieved using only CSS, with no JavaScript involved. JSFiddle: http://jsfiddle.net/hen75c3g/3/ Upon loading the page, the default content is displayed. When the first tab is clicked, the corresponding content is s ...

htmlcss

"Troubleshooting a jittery React sticky header during scrolling: Dealing with IntersectionObserver and CSS

My current project involves implementing a sticky header in a React application using the Carbon framework. The goal is to have a sticky header with a bottom border when users scroll up, providing context for their viewing experience. However, when they sc ...

javascriptcssreactjs

CSS: creating a subtle fade-in animation for an address element and an image

Can you help me out with some advice? I'm working on a navigation bar that has a dropdown button. Each item in the dropdown menu has a small image with an opacity animation applied to it. When you hover over the image, it becomes visible and vice vers ...

htmlcsscss-animations

Switch out the jQuery library on a webpage for Greasemonkey

Is there a way to update the jQuery version on a page using Greasemonkey? I want to experiment with a newer jQuery version on a website, but I don't have access to a development environment. ...

jquerygreasemonkey

Utilizing HTML5 audio elements with jQuery enhances the auditory experience

As I delve into creating a simple media section for a website, I have encountered some challenges that I would like to address. Let me explain the issue I am facing. I currently have a 'play list' consisting of 'links' - represented by ...

jqueryhtmlhtml5-audio

Ways to merge prop with mapping state

I'm in need of a dynamic state map, but I find myself perplexed when attempting to merge the state map created with const with the standard map syntax Here's how my index.js file looks: function Index({ data }) { const [value, setValue] = useSt ...

javascriptarraysreactjsjson

Add an item to one ng-repeat by clicking a button in another ng-repeat

I'm trying to manipulate two ng-repeats by adding values from one to the other and vice versa. Here's a snippet of my HTML: <div id="external-events"> <div ng-repeat="selected in selectedcolumn"> <div class="external-event b ...

javascripthtmlangularjsangularjs-ng-repeat

Styling Your PHP Output with Echo

Is there a way to create a compact text box with a scroll bar that can display recurring data generated by PHP activities on the server side? How can I format it in this way? ...

phphtmlcss

unable to update the status of a checkbox within the React virtual DOM

Hey there, I am currently working on a project where I have multiple checkboxes being looped on the left side. Based on the checked checkboxes, I am pushing the status and value of those checkboxes to the right side and displaying them as checkboxes. How ...

javascriptreactjs

JavaScript code does not run when a page is being included

On my AngularJS-based page, I have included some additional HTML pages like this: <div data-ng-include src="includehtml"></div> Here is the JavaScript code: $scope.selectImage = function(id) {$scope.includehtml = id;} (I pass the HTML file ...

javascripthtmlangularjs

smoothly slides into view and playfully bounces

http://jsfiddle.net/E6cUF/ The concept involves a grey box sliding left from behind a green box after the page is fully loaded, with a slight bouncing effect if possible. Update: I created a new version inspired by modifications made by others on the jsf ...

javascriptjqueryhtmlcssslide

Building a dynamic attribute management system with vue and vuetify

In the backend business object, there is a custom attributes data structure that allows clients to add key/value pairs for storing in the database. For instance: Map<String, String> customAttributes; Here's an example of how it would look in th ...

javascriptvue.jsvuetify.js

AngularJS: Organizing Controllers Horizontally Within ngRepeat

My data consists of a table with 100 rows, each representing a complex object that is an instance of a specific type. User interactions trigger operations on these objects individually, with each row having unique operations independent of the others. $sc ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Having trouble locating precise text within meta tags when using Selenium and Beautifulsoup

<div class="product-grid-item "> <meta itemprop="url" content="https://undefeated.com/products/air-humara- 17-qs-silver-carotene-bluespark-black"> My quest is to locate the code snippet above, specifically looking for the word &apo ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup

Master the art of keeping track in just a single line

I need to ensure these tabs stay in a single line and remain responsive for mobile devices. Below is the code snippet: <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-tabs"> <li class="active"& ...

htmltwitter-bootstrap

I'm having trouble with the React useState hook array - it seems to only save data after an API call and replaces the previously stored state. What

As a freelancer who has recently delved into development using nextjs and reactjs, I am facing a puzzling issue with the useState hook array. The problem lies in the inability to update data correctly. In my code, I have one useState hook to store arrays ...

javascriptreactjsreact-hooksweb-frontend

ESLint detected a promise being returned in a function argument where a void return type was expected

I'm encountering a recurring error whenever I run my ESLint script on multiple routers in my server. The specific error message is as follows: error Promise returned in function argument where a void return was expected @typescript-eslint/no-misuse ...

javascriptnode.jstypescripttypescript-eslint