When a different element includes animation, border radius and overflow are not adhered to

I encountered an unusual issue while experimenting with the transform property in CSS3.

Below is the code I used:

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.btn_exchange a {
    position: relative;
    text-decoration: none;
    display: block;
    width: 150px;
    float: left;
    color: #ffffff;
    font-size: 14px;
    background: #0ea2d3;
    box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
    text-align: center;
    font-weight: bold;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

a.abc {
    z-index: 0;
    -webkit-animation: pulse 1s linear 0s infinite alternate;
    animation: pulse 1s linear infinite;
}

#box_avatar {
    position: relative;
    margin: 0 auto;
    -webkit-border-radius: 62.5px;
    -moz-border-radius: 62.5px;
    -ms-border-radius: 62.5px;
    -o-border-radius: 62.5px;
    border-radius: 62.5px;
    width: 125px;
    height: 125px;
    border: 2px solid #ccc;
    display: block;
    overflow: hidden;
}

#img_avatar {
    width: 125px;
    height: 125px;
    cursor: pointer;
    border-radius: 62.5px;
}

#bg_gray {
    background: #4c4747;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 8px 0 10px 0;
    opacity: 0.8;
}

#bg_gray img {
    display: block;
    width: 20px;
    margin: 0 auto;
}
<div class="btn_exchange fl bad">
  <a class="button abc" href="#">Button</a>
</div>

<div id="box_avatar">
  <img id="img_avatar" src="http://i.imgur.com/O29DJOZ.jpg" alt="avatar" />
  <div id="bg_gray">
    <img src="http://i.imgur.com/m5qIRID.png" alt="btn_camera" />
  </div>
</div>

<div class="btn_exchange fl good">
  <a class="button abc" href="#">Button</a>
</div>

The issue arises when using the .bad div (eliminating the .good div), causing the gray background with the camera icon to not fit within the circular image.

If I remove the transform animation in CSS, the button will no longer pulse but the gray background will align correctly within the circular image.

Does anyone have insights on this and how to resolve it?

htmlcsscss-animationscss-transforms

Answer №1

Here is a solution to the problem you are facing: To ensure that the gray box with the camera icon stays within the circle without being cropped, you can adjust the z-index values of the elements in your code snippet. By setting a higher z-index value for the pulsing buttons, you can prevent them from overlapping the circle. Take a look at the modified CSS snippet below:

*, *:before, *:after {
  box-sizing: border-box;
}
.btn_exchange a {
  position: relative;
  display: block;
  float: left;
  width: 150px;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  background: #0ea2d3;
  box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
a.abc {
  z-index: 1; /* Updated z-index value */
  animation: pulse 1s linear infinite;
}
#box_avatar {
  position: relative;
  display: block;
  width: 125px;
  height: 125px;
  margin: 0 auto;
  border-radius: 62.5px;
  border: 2px solid #ccc;
  overflow: hidden;
}
#img_avatar {
  width: 125px;
  height: 125px;
  border-radius: 62.5px;
  cursor: pointer;
}
#bg_gray {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 8px 0 10px 0;
  background: #4c4747;
  opacity: 0.8;
}
#bg_gray img {
  display: block;
  width: 20px;
  margin: 0 auto;
}
<div class="btn_exchange fl bad">
  <a class="button abc" href="#">Button</a>
</div>

<div id="box_avatar">
  <img id="img_avatar" src="http://i.imgur.com/O29DJOZ.jpg" alt="avatar" />
  <div id="bg_gray">
    <img src="http://i.imgur.com/m5qIRID.png" alt="btn_camera" />
  </div>
</div>

<div class="btn_exchange fl good">
  <a class="button abc" href="#">Button</a>
</div>

To further explain the issue and solution in detail:

  • By adjusting the z-index values as described above, we can ensure that each element is rendered in the correct stacking order, preventing any overlap issues.
  • The layers created by the browser's rendering process play a crucial role in determining how elements are displayed on the webpage.
  • Enabling "Show Paint Rects" and "Show composited layer borders" in Dev tools can help visualize the layers and understand how they interact with each other.

By following this solution, you can effectively resolve the problem of the gray box not being contained within the circle due to improper layering. This adjustment ensures that each element is appropriately positioned and displayed on the page.

Answer №2

After examining the issue, I couldn't find a reason for the behavior. Would it be acceptable to bypass using the img element and instead opt for a background image?

If that works for you, here's a functional sample.

Another approach is to merge background and pseudo as an alternative to img. This method not only simplifies the html structure but also resolves the problem at hand.

*, *:before, *:after {
    box-sizing: border-box;
}

.btn_exchange a {
    position: relative;
    text-decoration: none;
    display: block;
    width: 150px;
    float: left;
    color: #ffffff;
    font-size: 14px;
    background: #0ea2d3;
    box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
    text-align: center;
    font-weight: bold;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

a.abc {
    z-index: 0;
    animation: pulse 1s linear infinite;
}

#box_avatar {
    position: relative;
    margin: 0 auto;
    border-radius: 62.5px;
    width: 125px;
    height: 125px;
    border: 2px solid #ccc;
    display: block;
    overflow: hidden;
    background: url(http://i.imgur.com/O29DJOZ.jpg);
    cursor: pointer;
}

#bg_gray {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    position: absolute;
    overflow: hidden;
    cursor: auto;
}
#bg_gray:before {
    content: "";
    background: #4c4747;
    width: 100%;
    height: 125px;
    bottom: 0;
    position: absolute;
    opacity: 0.8;
    border-radius: 62.5px;
}
#bg_gray:after {
    content: "";
    width: 100%;
    height: 30px;
    bottom: 0;
    position: absolute;
    background: url(http://i.imgur.com/m5qIRID.png) center center no-repeat;
    background-size: 20px;
}
<div class="btn_exchange fl bad">
  <a class="button abc" href="#">Button</a>
</div>

<div id="box_avatar">
  <div id="bg_gray"></div>
</div>

<div class="btn_exchange fl good">
  <a class="button abc" href="#">Button</a>
</div>

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

Generating an interactive 3D model of a web page embedded within a virtual environment

Exploring the concept of rendering a webpage within a 3D Scene using Three.js has been quite challenging. Most examples I come across seem to render something that is not interactive when clicked on. I've stumbled upon older videos showcasing clickab ...

htmlthree.js

Incorporating Bootstrap with Leaflet: A Seamless Integration

Having trouble integrating my bootstrap-based website with a Leaflet webmap. There seems to be a vertical shift in the Mapbox tiles. I suspect it's a conflict between the .css files of Bootstrap and Leaflet. You can check out my webpage at this link ...

htmlcsstwitter-bootstrapleaflet

Stop specific HTML elements from displaying using Python

Let's consider a scenario where we have the following string: string = '<img src="image.png"><input type=text>' We also have a special function that converts the string into HTML markup, allowing only certain tags like <img& ...

pythonhtmlfilterflaskxss

Is there a way to use CSS to swap out the content of one HTML element with another HTML element's content?

Having an issue with editing or locating a plugin's HTML template on WordPress. Wondering if it is possible to replace the content of one HTML element with another using just CSS? Appreciate any help! ...

htmlcsswordpress

Utilize JavaScript to enclose every piece of text within single quotes in a span element

I have a tiny snippet of text: "some sample text" just a little more "additional text" I am trying to figure out how to wrap all the content between quotation marks in a span container, similar to what hilight.js does. I've been struggling to make it ...

javascripthtml

Should you construct a fresh element using JavaScript, or opt to reveal a concealed one using CSS?

What are the benefits of using the following approach: var target = document.getElementById( "target" ); var newElement = document.createElement( "div" ); $( target ).after( newElement ); compared to just hiding the newElement div with CSS and showing ...

javascriptjquerycss

Expanding and Shrinking Text Areas with Jquery

I am looking to create a textarea that comes preloaded with content. The height of the textarea should adjust to auto when there is content present, but switch to a height of 4.2rem when it is empty. Additionally, I want the textarea to dynamically increas ...

javascripthtmljquerycss

Utilizing the background-size property for image styling within the img tag

html <div> <img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" /> </div> css div{ width: 200px; height: 100px; background-color: red; } img{ position: re ...

jqueryhtmlcss

Attempting to output a URL using CSS for printing purposes

My current code involves working with the CSS print feature. When I implement the following code, a URL is visible next to the KRON4 in two instances: 1) Viewing the page in the browser window 2) Clicking the print button on the browser. I aim to display ...

csshtml

How to position the play button in the center using Material UI and Flexbox

Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided. function Tasks(props) { const { classes } = props; return ( <div className={classe ...

cssflexboxmaterial-ui

Fetching data from MySQL to create statistical analysis

Let's start with the technical setup: Server: Apache/2.2.22 (Debian) Php: 5.4.4-14+deb7u9 MySQL: 5.5.38 This website is utilized by employees to monitor their daily tasks. As I began developing statistic pages in html/php for a monthly summary, ...

phphtmlmysqlstatistics

How about adding various colors in the background with layers?

I was recently given a task by a client to convert their picture art into CSS code. While I have successfully completed most of the task, I am facing difficulty in coloring the div similar to the example provided by the client. Here is the client's ve ...

htmlcss

What is the best way to have the text in my table cell wrap when it reaches the width of the image in the same cell?

Within the table, I have <td> elements structured like this: <tr> <td> <p class="tableText">Lengthy random text..........</p> <img src="www.imageurl.com/img.png" width="33vw"> </td> &l ...

htmlcsshtml-tableword-wrap

Angular not functioning properly with alert windows

Here is a snippet of code where I am attempting to create an alert when a button is clicked: <!DOCTYPE html> <html> <head> <title></title> </head> <body ng-app> <button ng-click="alert('test')"> ...

htmlangularjs

How to properly utilize HTML <a> tags with accents in the Python Telegram API

I am facing an issue where a part of the href link is not working due to the accent (õ). Can someone guide me on how to resolve this? _bot_token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" _bot_chatID = "@xxxxxxxxxx" ...

pythonhtmlapiurltelegram

Is there a way to retrieve the directory path of a folder that a user selects using a file input, without the need for them to actually upload the contents of the folder?

Is there a way to retrieve the selected folder path from the user without having them upload the files inside the folder? My goal is for the user to specify the location where they want to save the file that I will supply. I am looking to only display th ...

htmlangulartypescriptbootstrap-4

Azure Chatbot that logs conversations in Webchat whenever the user selects 'none of the above' option

Recently, I've delved into the world of web chat services and embarked on a journey to craft a chat bot using pure JavaScript code that can seamlessly integrate into any HTML file. Despite consulting Microsoft's documentation, I find myself in a ...

javascripthtmlazure

Emphasizing buttons that are in a "pressed" or "inactive" state

I've implemented three push buttons in my code using input with type="button", which act as toggle buttons (on/off). In the past, I used images to indicate when a button was pressed or reset, but now I want to achieve this effect using CSS. However, ...

cssformsbutton

HTML 5 File selection on iOS and Android using Cordova/Phonegap

I attempted to utilize the camera in a PhoneGap app using the HTML5 input tag as shown below. Create a new project through CLI Add iOS and Android platforms Incorporate the camera plugin Build for both devices Run on iPhone 5 with iOS 7.1.2 and Samsung N ...

androidioshtmlcordova

Ways to convert ng-options to ng-repeat in AngularJS

Currently, I am facing an issue with Angular Material where I cannot use the ng-options directive for select. This is because options are not being created inside the select tag in AngularJS Material. I currently have ng-options="(k.x.y) as k.x.z for k in ...

htmlangularjs