When using Webkit on Chrome and Safari, an artefact may be left behind after transitioning from overflow: visible to hidden

My goal is to have a full-size image appear when hovering over the thumbnail using overlays and overflow:hidden & visible techniques.

While this setup works well in Firefox and IE, it seems to create issues in Chrome and Safari. You can experience this problem by visiting our page at Webkit artefact

Here is the CSS I am currently utilizing:

.img-thumb
{
    position:relative;
    height:60px;
    width:60px;
    overflow:hidden;
    padding:5px;
    font-family:Comic Sans MS, cursive, sans-serif;
    font-size:14px;
}
.img-full
{
    position:absolute;
    display:none;
    top:0px;
    left:0px;
}
.img-thumb:hover .img-full
{
    display:block;
    z-index:10;
}
.img-thumb:hover
{
    overflow:visible;
}
htmlcsswebkit

Answer №1

It appears that the issue is linked to using position: absolute (even when switching to position: relative, the problem persists) with the .img-full class.

While changing it to position: static (or removing the position: absolute altogether) would resolve the problem with overflow: hidden, it would introduce challenges in positioning the .img-full element.

Answer №2

To address this issue partially, one workaround is to define a specific height for the img-thumb container that is being hovered over (this allows the browser to clear up the box accurately upon mouse out).

.img-thumb:hover
{
    overflow:visible;
    height: 500px; /* including this clears up any artifacts - it's important to set the total hover height and keep it consistent */
}

For a demonstration of this fix in action, refer to http://jsfiddle.net/ABCD/. This method will work effectively if the hover height is predetermined and can be specified within the CSS.

It seems like the cleanup process in webkit may be too aggressive when clearing up the box after hovering, possibly disregarding absolutely positioned child elements during the process. Despite this, the display while hovering appears to function correctly (indicating a potential bug in webkit).

Answer №3

I encountered a similar issue but was able to resolve it using JavaScript and jQuery:

For example:

$(".img-thumb").on('mouseover', function () {
   $(".img-thumb > .img-full").slideDown();
});

$(".img-thumb").on('mouseleave', function () {
   $(".img-thumb > .img-full").slideUp(1);
});

The use of .slideUp(1) causes the element to fade out in 1ms, making the effect barely noticeable to the user.

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

Creating a multi-line graph with phpGraphlib is a breeze!

I've managed to generate a line graph using phpGraphlib, but now I'm stumped on how to create a multiline graph with this library. The x-y values are stored in arrays here. Here's my code: <?php include("phpgraphlib.php"); $graph ...

phphtmlphpgraphlib

Is there a way to use jQuery to make a div fade in and toggle over another

I have created a test page and I am looking to achieve a specific effect when the page loads. I want everything on the page to be hidden initially. When I click on the "About" text, I want it to fade in using fadeToggle(); however, when I click on "My work ...

javascriptjqueryhtmlcss

PhP submit triggers fatal error

I am currently developing a form to add records to a database directly from the browser. However, upon submitting the form, I encountered the following error: Fatal error: Call to a member function execute() on boolean in /srv/http/career.php on line 56 ...

phphtmlmysql

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

cssheight

Styling text using CSS depending on the displayed text

Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...

javascripthtmlcss

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Is there a way to determine when a line will break so I can apply different styles? The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, w ...

javascriptcssreactjs

CSS Display Lag

As someone who is just dipping their toes into the world of coding, I've been experimenting with code in my free time. However, I've encountered an issue with a certain code where the CSS seems to have a noticeable delay. Upon initial loading, th ...

htmlcssbootstrap-4

Exporting Excel tables to HTML format

Here is the code I am working with: $output = ' <table class="sticky-enabled"> <thead><tr><th>Text0</th><th>Text1</th><th>Text2</th> </tr></thead> <tbody id=""> <tr class="o ...

phphtmlexcelheaderhtml-table

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss

Elements that are hidden or not displayed are still able to receive mouse over events

I am in the process of learning how to handle events within svgs and I have encountered a strange issue. Currently, I am working on an infovis project where I create an interface to display various column-graphs. This part is functioning well so far. Ho ...

javascriptcsssvg

Prevent users from downloading images

I'm trying to prevent image downloads by regular users, like so: <div style="background-image: url(img.jpg); background-size: cover; background-repeat: none; "> <img src="wtrmrk.jpg" style=" opacity: 0; " /> </div> If the img.jpg s ...

htmlcss

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

css

What is the best way to align images to the right while also centering them in relation to each other?

Here is the current code snippet: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm bg-primary"> One ...

htmlcssbootstrap-4

Angular 15: Utilizing the Mat Slider Component for Dynamic Value Adjust

This particular code worked perfectly fine in Angular 14, but unfortunately it seems to have compatibility issues with Angular 15. <mat-slider min="1" max="150" step="10" ...

javascripthtmlangularangular-materialangular15

"Unlocking the Power of CSS: How to Effortlessly Align Text and Images

Dealing with an unchangeable piece of HTML can be frustrating, especially when it comes to styling. In my case, I have the following structure: <a title="some title" href="..."> <img src="....jpg"></img> Some text </a> Here ...

htmlcssimagecenterfixed

Content remains connected to the left side of the webpage in a single column, adapting to different screen sizes

Can someone help me with this issue: RWD I have been struggling to center these elements in a single column when the screen size is less than 960px. I have tried using margin: 0 auto; but it doesn't seem to be working. Any suggestions? ...

htmlcss

What is the reason behind the escape key not functioning in the Ace editor?

While using the Ace JavaScript editor with vim keybindings, I encountered an issue. Whenever I press the escape key to exit insert mode, the editor loses focus instead of exiting the mode. How can I capture this keypress in all modern browsers so that Ace ...

javascripthtmlcssace-editor

Elements generated from bootstrap's divs are not produced in a single line

I'm attempting to have a div append multiple other divs with the class "card" from Bootstrap, but instead of being created in a horizontal line, they are stacked on top of each other. I have tried to modify the "card" class by adding display: inline- ...

jquerycssbootstrap-4

html.hidden loses its value when the name attribute is modified

In my cshtml view, I have an @html.editorfor and an @html.hiddenfor element. When a button is clicked, I dynamically change the name attributes of both elements so that they can be posted in a separate list. The value of the editorfor element should be a ...

javascriptjqueryhtmlasp.net-mvc