Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

I was under the impression that I had come up with a brilliant idea...

I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this by utilizing the :after pseudo-class to manipulate either the height or position of a box on hover, while keeping it behind the actual element with a higher z-index. I also intended to use the rgba() function for the transparent background of the <a> tag.

I managed to achieve my desired effect. You can view the outcome here: http://jsfiddle.net/MrPickle/ysdhexbq/3/

However, as I navigated through the menu, I noticed a thin line occasionally appearing at the bottom of the button. While I suspect this might be due to my browser's rendering engine, I am curious if others encounter the same issue and if there is an explanation for it.

In the example provided in the fiddle, I used transition: top to hide the box created by :after, though I encountered similar issues when trying transition: height and transition: transform.

Actually, scratch that, the results were even worse. To see the issue occur frequently, take a look at this version: http://jsfiddle.net/MrPickle/ysdhexbq/5/ It happens more prominently if you quickly move your cursor all the way through before the first transition completes.

csshoverz-indextransparenttransition

Answer №1

After following the advice of The Iron Developer and implementing hardware acceleration, I noticed that the bug no longer occurs on my computer. However, I did experience some jitteriness during the initial transitions. Since the transition itself isn't too demanding, I decided not to utilize additional system power unnecessarily.

I did some tinkering and discovered that placing a border around the parent div seems to resolve the issue with the line display area being occupied.

Check out my updated fiddle here: http://jsfiddle.net/MrPickle/ysdhexbq/8/

The performance of the transition is now smooth and quick, without any previous issues.

Answer №2

Here's a little tip that could come in handy: try enabling hardware acceleration.

To do this, simply include the following code:

a:after {
    -webkit-transform: translate3d(0, 0, 0);
}

Check out my updated version of your fiddle: http://jsfiddle.net/TheIronDeveloper/ysdhexbq/9/

By using translate3d, you can switch the browser to a ~hardware accelerated mode, which can greatly enhance the performance of your CSS.

For more insight on this topic, here's an article discussing the benefits of hardware acceleration when using the filter:blur style (as applying filter:blur can be resource-intensive for browsers):

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 causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?

I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application. Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button ...

htmlcssangulartwitter-bootstrapng-bootstrap

What is causing my inline JSX styling to override my media query?

After exhausting all my options and searching high and low for a solution, I am completely stuck. Despite trying various methods like importing media queries from a separate file and using ancestors to target elements, I still cannot get this to work. The ...

cssreactjsjsx

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

cssreactjsmaterial-uigrid

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar. Instead of using the 'display: inline-block' property because it creates unwanted whit ...

htmlcss

What could be causing the background color not to change on the HTML page with Bootstrap?

Learning html, bootstrap, and css styling can be a confusing endeavor. Sometimes things don't work as expected, like changing the background color. Despite following what seems like a simple solution after googling, the background color remains unchan ...

javascripthtmlcssbootstrap-4

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...

htmlcss

Tips for aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

htmlcsstwitter-bootstrap

Incorporate hover and click functionality to the dropdown button using JQuery

Recently, I implemented hover and click events to trigger the opening of a dropdown content The functionality is mostly working as expected but there is a slight issue When hovering over the element, the content opens and closes properly However, on the ...

jquerycss

I'm having trouble getting my website to align in the center of the

Struggling to center my website no matter what I try. I experimented with different CSS properties but haven't had much luck. margin: auto 0; I also attempted the following: margin-left: 50%; margin-right: 50%; The closest I got was aligning every ...

css

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

htmlcss

Disappear text gradually while scrolling horizontally

There is a need to create a special block that displays fading text on horizontal scroll. However, the problem is that the block is situated on a non-uniform background, making the usual solution of adding a linear gradient on the sides unsuitable. Click ...

javascripthtmlcssfade

What is the best way to create a border that surrounds a collection of pictures?

I'm currently facing a challenge in getting a border to perfectly fit around a collection of images. The issue can be observed in this Jsfiddle I shared, where the border aligns with the top and left edges, but not with the bottom and right edges. Her ...

htmlcssimageborder

What makes UL stand out over OL?

Similar Question: Why is it common to use <ul> for navigation instead of <ol> ? Why do designers consistently choose to use ul for menus and other elements instead of ol? ...

htmlcss

Utilize Tailwind CSS to design a triangular shape positioned in the lower right corner of the parent div

Is there a way to position a triangle in the bottom right corner of a parent div without it extending beyond the boundaries? I attempted to use tailwind css for this, but the sides of the triangle are crossing over the parent div. Any suggestions on how to ...

csstailwind-css

Achieve uniform height for two elements using Material UI

Here is the code snippet I have: <div className="center"> <TextField variant="outlined" className="manualUserFollowTxt" required id="manualUserFollowTxt" label="Username" name="username" autoComplete="username" a ...

cssreactjsmaterial-ui

HTML - Align 3 tables horizontally with text below

I have successfully floated 3 tables next to each other using <table style="float:left;">. However, I am facing an issue where some text is being wrapped to the right side of the right-most table instead of being left-justified at the very ...

htmlcss

When utilizing gridView, the ExecuteReader method will throw an error if the CommandText property has not been

I am encountering an issue with populating a gridView using the ExecuteReader function in my program. Every time I run it, I receive an error message stating "ExecuteReader : CommandText property has not been initialized". aspx.cs private void LoadGr ...

c#htmlcssasp.net

Grammarly is seamlessly inserting padding into my body element

After setting up my website on GitHub, I ran into an issue where the Grammarly Chrome extension was automatically adding a padding-top attribute to the body tag. <body data-new-gr-c-s-check-loaded="14.1028.0" data-gr-ext-installed="" ...

htmlcsstwitter-bootstrap

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works pe ...

htmlcssangular