The influence of the CSS transform property on one element can impact another element that also has the transform property set to scale down to 0

When the transform property is added to div.tp-banner, the border of div.tp-border-bottom disappears. However, setting the height of div.tp-border-bottom:after to 2px makes it visible. This issue is observed on the Android WebView platform.

.tp-banner {
    width: 100px;
    height: 60px;
    -webkit-transform: translate(0px, 0px) translateZ(0px);
    transform: translate(0px, 0px) translateZ(0px);    
}
.tp-border-bottom {
    position: relative;
    width: 100px;
    height: 60px;
}
.tp-border-bottom:after {
    content: "";
    position: absolute;
    font-size: 0;
    line-height: 0;
    background-color: #e1e1e1;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-transform-origin: 0 1px;
    -ms-transform-origin: 0 1px;
    transform-origin: 0 1px;
}
.tp-border-scale:after {
    -webkit-transform: scaleY(0.3333);
    -ms-transform: scaleY(0.3333);
    transform: scaleY(0.3333);
}
/*@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .tp-border-bottom:after {
    -webkit-transform: scaleY(0.3333);
    -ms-transform: scaleY(0.3333);
    transform: scaleY(0.3333);
  }
}*/
<div class="tp-banner"></div>
<div class="tp-border-bottom tp-border-scale"></div>

Answer №1

You can enhance the appearance of the transformed elements by applying the following style:

-webkit-backface-visibility: hidden;

Referenced from a related inquiry on CSS3 hover effects causing unusual behavior on other elements in Chrome

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

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

Currently, I am experimenting with incorporating my custom class titled "article-title" which is significantly larger than the default H1 font size in Twitter Bootstrap. Can someone provide guidance on the necessary steps to ensure responsiveness? My goal ...

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

How can I efficiently make a dropdown menu with search functionality instead of using datalist?

I am currently working on creating a custom searchable input field that makes backend calls. Instead of using datalist, I want to design a unique UI with ul and li items. While I have successfully implemented the search functionality, I am facing a glitc ...

Ensure that two div elements expand to occupy the available vertical space

I am looking to create a layout similar to the following: |---| |------------| | | | b | | a | |____________| | | |------------| |___| |______c_____| Here is the code I have so far: <table> <tr> <td class="leftSid ...

When clicking on HTML input fields, they do not receive focus

I am facing a puzzling issue where I am unable to access the input fields and textareas on my HTML form. The JS, HTML, and CSS files are too large for me to share here. Could someone provide guidance on what steps to take when troubleshooting this unusual ...

Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Check out this screenshot of a navbar PSD design I'm aiming for: To make my navbar dropdown show up upon hovering, I've implemented the following JavaScript: $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-men ...

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...

Simple code styling tool

Seeking guidance to create a basic syntax highlighter using JavaScript or ClojureScript. While aware of existing projects like Codemirror and rainbow.js, I'm interested in understanding how they are constructed and looking for a simple example. Do th ...

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

What is the best way to adjust the size of the box while ensuring that the text remains centered inside it

Consider the HTML snippet below: <div class='title'><h2>Title</h2></div> I attempted to adjust the size of the box with the following CSS: .title { display: block; border-radius: 12px; border: 1px solid; } The resultin ...

Wave your way to unique text creation with Firefox

Hey there, I've got some text inside a div that's been transformed with rotate(3deg). Strangely enough, in Firefox, the text appears wavy. When I remove the transform property from the div, the waviness disappears. Is there any way for me to keep ...

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

I am facing an issue with two columns positioned side by side. The right column contains a tooltip that overflows to the left on hover. Both columns are scrollable and relatively positioned to allow the tooltip to follow the scroll. However, the tooltip is ...

Apply CSS3 attributes in real time

The for loop I have is functioning properly: <div id="page1div"></div> <script> list = " "; for (var i = 0 ; i < length ; i++) { list = "<h1 class='entriesdisplayed'>" + item(i) + ...

Scrolling with animation

While exploring the Snapwiz website, I came across a captivating scroll effect that I would love to implement on my own site. The background picture changes seamlessly as you scroll, with the front image sliding elegantly into view. A similar type of scro ...

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

How can I access the fourth div element within the initial row of a multirow div container?

My current HTML structure is causing me some confusion. I am trying to create a CSS selector for the element with the text "DESIRED ELEMENT": <div class="TopDiv"> <div class="container"> <div class="row"> ...

What could be causing my Bootstrap 5 hover effect to malfunction?

Can anyone help with changing the hover effect of a bootstrap button in my code? Here's the HTML: <button type="button" class=" btn btn-dark">Sign Up</button> And here's the CSS I tried: .btn-dark:hover { color: ...

How to minimize the amount of typing needed when specifying grid positions in CSS Grid layout?

(I am currently in the process of upgrading the design of this data entry page from a basic CSS/HTML table layout to something more advanced, utilizing CSS Grid layout). Following common conventions, I have structured it into 12 columns. Each entry field ...

I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

I have limited experience and need some assistance with resolving this particular issue. I am looking to create an image upload box that works when clicked on the input field. Thank you in advance. function readURL(input) { if (input.files && ...