glitch caused by overflow:hidden and transformation with translate

My issue involves a box with a hidden caption, set to have position: absolute and hidden using top: 100%. The parent of this caption has overflow: hidden. When I hover over the box, the caption slides up to become fully visible.

The problem arises during this transition where there seems to be a pixel discrepancy. This results in the caption being 1 pixel narrower than the parent box during the transition. However, once the transition is complete, everything appears as it should.

This issue occurs specifically in IE 11 on Windows 8.1 and Webkit browsers on Mac 10.11.2.

To see this effect, you can view it on this fiddle. If you don't observe the pixel bug initially, try resizing the window for it to appear.

You can also see the error in the screenshot below:

https://i.sstatic.net/trbGU.jpg

I have attempted several solutions including:

  • Increasing the width of the caption by 1 pixel
  • Adding overflow-x: hidden
  • Using translate3d
htmlcssinternet-explorerwebkitcss-transitions

Answer №1

This issue has crossed my path previously. The glitch with pixels is often triggered by the transform:translate property.

Consider applying the following to the containing element:

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

Answer №2

Let's experiment with some CSS possibilities:

position: relative;

-moz-transform: rotateY(180deg);

-webkit-font-smoothing: grayscale;

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

React Href is not functioning as expected in relative paths

Recently, I delved into React apps and managed to create one with a router. Everything was smooth sailing in dev mode until I tried running index.html from the build folder after npm run build. It seems like all the href links are broken. I suspect somethi ...

javascripthtmlreactjsreact-router

End of ImageButton tag

I am currently working on this code : <div runat="server" class="slide"> <img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' /> <div id='details<%# Eval("C ...

javascriptc#htmlcss

How can I get rid of the extra space below the container in bootstrap?

I need to enhance the red-framed box_switch section in the image above by moving it to the top and applying a background color. https://i.sstatic.net/NZPUQ.png React.js <div className="container"> <div className="row mx-auto t ...

cssreactjsbootstrap-4

Discover the method for invoking a Javascript function within a Leaflet popup using HTML

Upon clicking on a marker on the leaflet map, I aim to trigger a popup box that contains five elements: Title Description Image Button (Next Image) Button (Previous Image) To achieve this, I attempted to include a custom popup for each feature ...

javascripthtmlvue.jsleaflet

Splitting Sub Menu into 2 Columns in Wordpress Twenty Seventeen Theme

I'm currently using the Twenty Seventeen theme on my WordPress site. My issue lies with trying to arrange my sub-menu items into 2 columns, as I have multiple items nested under one of my main menu options. After attempting to add the following code ...

csswordpresssubmenu

How to Retrieve an HTML File Using a Servlet

Within the WebContent directory, I have a file named index.html along with all the necessary script files properly organized. The servlet code appears as: public class CreateService extends HttpServlet { private static final long serialVersionUID = 1L ...

javahtmlservlets

The attribute 'nameFormControl' is not a valid property on the 'ContactComponent' component

Greetings, StackOverflow community! I'm currently working on an Angular + Node app and I've run into a major problem related to forms and validators in Material Angular. Right now, I'm facing an issue where the HTML component is not recogn ...

htmlangularformsvalidationcomponents

How to properly store response text in JavaScript variable?

Utilizing Ajax to execute a PHP script on my website, I aim to assign the response from the PHP script to a JS variable. The objective is for this script to set the variable "stopAt" to 42. This is where I encountered an issue: Below is the code snippet ...

javascriptphphtmlajax

Guide to placing a basic div directly over a basic html table td

I need to create a simple html table with labels in one column and content in another. What I want to achieve is placing a div over the content td while keeping the label visible. I am looking for the most efficient way to do this, possibly making the seco ...

htmlcsstwitter-bootstrap-3

Distributing information to modules made of Polymer

Is there a way to create a single source for all data that my elements can utilize but not change (one-way data-binding)? How can I achieve this without using a behavior? I attempted the following in my code: <script type="text/javascript" src="/data. ...

javascripthtmldata-bindingpolymerweb-component

Deciphering HTML entities and decoding URLs within a continuous flow

Is it possible to find functions that accept streams and output streams for decoding operations, rather than loading the entire encoded document into memory like the HttpUtility.UrlDecode and HttpUtility.HtmlDecode methods do when taking strings as input ...

c#html.net.net-4.5

Explore a unique navigation bar using CSS hover effects

I am trying to create a navigation bar that displays a big block when hovered over, but unfortunately, it's not working as expected. Below is the HTML code I have written: <div id="outerContainer"> <div id="header"> ...

htmlcss

Strange yellow background color is showing up on OSX Safari

Whenever I hover over a language link with the language submenu open, an unexpected yellow background-color appears. This issue seems to be caused by the CSS rotation used for animating the menu opening. The problem is only noticeable on non-retina screen ...

htmlcssanimation

Steps for executing the jQuery script are as follows:

A friend shared this code with me and it's working perfectly here http://jsfiddle.net/WVLE2/ I tried replicating it on an HTML page below, but unfortunately, it's not working. I'm still learning jQuery and would appreciate any help on how t ...

jqueryhtml

Tips for optimizing a CSS file that includes the @page at-rule

When the CSS file for media='print' contains the @page directive, .myreceipt { @page { visibility: hidden; margin: 0 15px; } @page { height: auto; } } The ASP.NET MVC4 built-in minification tool does not ...

c#htmlasp.netcssasp.net-mvc-4

What is the best way to align checkboxes perfectly alongside the rest of the text within the text box?

I need the checkbox to be positioned under the text boxes in a aligned manner. Even though I used the CSS code below to align the text boxes, the checkboxes are not properly aligned: label { width:135px; clear:left; text-align:right; p ...

htmlcss

Discover the magic of setting the height to fit-content in TailwindCSS!

I'm currently using TailwindCSS and attempting to make a <div> adjust in height based on its child, a <button>. Below is my code snippet: <form className="w-full flex h-96 gap-2 mt-8 flex-wrap"> <textarea ...

cssreactjstailwind-css

Hide the unattractive focus border in Bootstrap-Select

I've been trying to remove a black border surrounding my selectpicker list box: https://i.sstatic.net/V2rNq.png Even without focus, the border persists: https://i.sstatic.net/ncoDM.png Despite using outline: none; in my CSS, the unwanted border re ...

htmlcssbootstrap-4bootstrap-selectpicker

Tips for extracting information from a table containing constantly changing data values

It seems like a bit of a challenge as the website developers are working to prevent this. I'm attempting to create a basic app to access and display data from a table on a website. The table can be found here: However, the table data appears after t ...

javaandroidhtmlweb-scraping

There seems to be an issue with the <mat-form-field> where normal input functions correctly, but encounters an error when trying to use mat

I've searched through other inquiries, but none have provided the solution I am looking for. <mat-form-field> <mat-select matInput placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> ...

htmlangularweb