What is causing this image to expand when hovered over, even though it is not at 100% width in FF21?

I am experiencing an issue with a responsive image that has a hover transition. Everything works well when the image is at 100% width, but in Firefox version 21, when the browser window is resized causing the image to shrink and then hovering over it, there is a slight upward shift of the background image at certain sizes. This shift is very small and not consistent across all widths.

A screenshot showing the two states (light area without hover and dark area with hover) below. The bug is most noticeable at point 'x'. It only occurs at specific widths and is minimal but still noticeable.

I have tested this behavior in IE and Chrome, and they do not exhibit the same problem. Therefore, it seems to be specific to Firefox. It appears as if Firefox is resizing the image to be 1px less in height. Does anyone know why this is happening and how to resolve it? (Link to jsfiddle provided for reference)

http://jsfiddle.net/t3Djd/1/

HTML

<body>
  <figure>
      <h2><a href="#">Title</a></h2>
      <a href="#"><img src="http://placehold.it/500x450" /></a>
  </figure>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    width: 100%;
    font-size: 100%;
}

/*========================================
============== CENTER IMAGES =============
========================================*/

body {
    text-align: center;
}

/*========================================
=========== RESPONSIVE IMAGES ============
========================================*/

figure,
figure > a,
img {
    max-width: 100%;
}

/*========================================
============ GENERAL STYLING =============
========================================*/

figure h2 {
    text-align: center;
    font-style: italic;
    font-size: 1.75rem; /* 16 x 1.75 = 28px */
    font-weight: normal;
}

figure h2 a {
    text-decoration: none;
    color: black;
}

/*========================================
============ HOVER TRANSITION ============
========================================*/

figure {
    padding: 1rem 1rem 2rem;
    position: relative;
    display: inline-block;
}

figure h2 {
    margin: -1rem 0 0 -1rem; /* offset the figure padding */
    z-index: 2;
    position: absolute;
    line-height: 0;
    width: 100%;
    top: 50%;
}

figure h2 a {
    z-index: 1;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

figure:hover h2 a {
    color: rgba(255,255,255,1);
}

figure > a {
    display: inline-block;
    line-height: 0;
    background: black;
    box-shadow: 0 2px 5px black;
}

img {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

figure:hover img {
    opacity: 0.5;
}

Answer №1

If you are experiencing issues with Firefox, it may be due to a known bug that has been discussed here

For more information, you can refer to the Firefox Bug Report

A potential solution is to add box-shadow: #000 0em 0em 0em; to the css img tag

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 prevent URL modification in Angular?

Currently, I am working on a project with a specific page (let's call it localhost:XXXX/notification-page) and we want this to be the only URL that can be accessed. Any attempt to change the URL should redirect users back to the notification-page. As ...

None of the available paths matched with api/v1/users at this moment

I encountered an issue while following a tutorial and I am unable to pinpoint the mistake in my "SignUpView.vue" file. I attempted switching to re_path but it did not resolve the problem. Not Found: /api/v1/users [15/Oct/2023 22:30:42] "POST /api/v1/user ...

Is it possible to produce data on the server and then transmit it to the client?

Can you provide guidance on creating a webpage that prompts a python script to run on the server, and then displays the output of the script back in the browser? I'm put time into researching and seeking assistance during my web programming course. A ...

An error occurred: Reaching the maximum call stack size when utilizing the .map function in jQuery

Encountering a console error: Uncaught RangeError: Maximum call stack size exceeded This is the jQuery snippet causing trouble: $(document).on("change","select.task_activity", function(){ selected_activity = $("select.task_activity :selected").map(fu ...

Exclude the HTML attribute prior to displaying

Is there a way to prevent the src attribute from being used for each img tag until after a certain action is completed? I am trying to modify how images are fetched. Here's what I tried: $('img').each(function() { var elem = $(this); ...

Steps to apply the nav-active class to a navigation using jQuery just once

Seeking assistance with a problem I am facing. I would like to add the nav-active class to an li element only once, meaning if a child element is selected, then the parent li should not have the nav-active class. Below is the code I am using, but it does n ...

Arranging components in a horizontal layout on Jquery mobile

I'm completely new to Jquery mobile and I'm having trouble getting these elements aligned. Here's my code, but I need the two icons to line up horizontally with the caption "Heading". <h3>Heading</h3> <img src="../re ...

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

Issue with Django URLs: Error when trying to match routes

I have recently made changes to some of the URLs in my app, and now I am encountering an error when trying to render my index page. Can someone help me identify the issue? I have already checked for typos in my HTML file. The error message I am receiving i ...

What is the proper way to apply :hover on the last child element using material-ui?

Currently, I am working with React and material-ui to create a menu component. This menu has a list of items, with the last item being unique in terms of styling. I have successfully used the :last-child selector for this purpose, but I am facing an issue ...

Troublesome tab key function in FireFox causing navigation issues

I'm facing an issue with the tab key focus on links in FireFox. Strangely, it's working fine in Chrome but in FireFox, it keeps looping within one element. For better understanding, I have created a demo showcasing this behavior specifically in ...

Leveraging AJAX to access a PHP file

I'm currently attempting to access a PHP file that updates a database entry. To ensure that only specific parts of my webpage are updated, I intend to utilize AJAX. Once the PHP file has executed, I aim to modify an image on the triggering page. Coul ...

Creating a CSS tooltip using only HTML and CSS may present some challenges and not function as intended

I've been attempting to create a basic tooltip using only CSS3 and HTML, but for some reason the transition isn't functioning. Can someone help me identify what I might be doing incorrectly? HTML Structure <p> This paragraph has a too ...

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

Design a dynamic advertisement page using HTML and Bootstrap to ensure responsiveness

I am currently working on a marketing project where I want to give clients the ability to customize their landing page with image ads in a layout that looks something like this: -------------------------------------------------------------------------- | ...

Variables for HTML comment form using PHP mail

How do I properly pass HTML form variables to a PHP mailer? The PHP code is: $comment = $_POST['comment']; $email = $_POST['email']; $to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60131313 ...

Angular2: Dynamically switch between selected checkboxes in a list

Is there a way to toggle a checked checkbox list in Angular2? I am trying to create a button that, when pressed while the full list is visible, will display only the checked items. Pressing the button again would show the entire list. Here's the Plu ...

What is the method for aligning text to the right side within a ListItem?

Currently, I have these elements where the "YoYo" text is aligned to the left by default. However, I am looking to adjust the positioning of some "YoYo" texts so that they can appear on the right side. I attempted to provide a style object with justifyCon ...

Platform designed to simplify integration of high-definition imagery and scalable vector illustrations on websites

In the ever-evolving world of technology, some clients support advanced features like svg while others do not. With the rise of high resolution devices such as iPhone 4+ and iPad 3rd gen., it has become crucial to deliver graphics that can meet these stand ...