The transition of my header and navigation finish in the desired places and have the correct look I am going for, however, the transition is jumpy, almost as if something is trying to restrict the translation from happening. Any advice on how I can go about fixing this erratic transition behavior?
With a similar problem, the padding of the initial element style was the problem (before JavaScript changed the style class.)
I expect the transition to be smooth and seamless, not fighting to transition into it's proper end place.
Thanks again for any help.
PS: I'm not sure how to reference the JS file at the bottom of the HTML code to allow the JS code snippet to change the html elements properly. The CSS which is supposed to make the 'headerLogoBackground' sticky at the very top of the window and change is not being applied which is needed to answer the question. However, I don't have this problem on my local machine - sorry guys, working on fixing this in the stackoverflow code snippet editor:/
// JavaScript
window.onscroll = function() {
headerSlide_and_change();
}; // end window.onscroll
function headerSlide_and_change() {
if (document.body.scollTop > 30 || document.documentElement.scrollTop > 30) {
// vars
var headerLogoBackground = document.getElementById("headerLogoBackground");
var headerLogo = document.getElementById("headerLogo");
headerLogoBackground.classList.remove("headerLogoBackground"); // header background
headerLogoBackground.classList.add("headerLogoBackGroundTransform");
headerLogo.classList.add("headerMove"); //header title slide
} else {
/*---header background---*/
var headerLogoBackground = document.getElementById("headerLogoBackground");
headerLogoBackground.classList.remove("headerLogoBackGroundTransform");
headerLogoBackground.classList.add("headerLogoBackground");
/*---header---*/
var headerLogo = document.getElementById("headerLogo");
headerLogo.classList.remove("headerMove");
headerLogo.classList.add("headerLogo");
} // end else
} // end navChangeOnScrollUp
html,
body {
margin: 0;
height: 100vw;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #796651;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
// Initial CSS
// header
.headerLogoBackground {
background-color: none;
transition: background-color .2s linear;
}
.headerLogo {
text-align: center;
transition: all .2s;
}
.headerLogo a {
font-family: 'Squada One', cursive;
font-size: 40px;
text-decoration: none;
color: #d8cfc3;
}
.headerLogo a:focus {
outline: none;
color: darkslategrey;
}
// navigation bar
.navRaise {
position: -webkit-sticky;
position: static;
z-index: 2;
}
nav {
text-align: center;
font-weight: bold;
width: 100%;
margin-bottom: 8%;
}
.navUlStyle {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.26);
height: 45px;
line-height: 45px;
}
nav li {
float: left;
width: 8%;
padding-left: 12.5%;
padding-right: 12.5%;
}
nav a {
font-family: 'Squada One', cursive;
font-size: 20px;
text-decoration: none;
color: #d8cfc3;
display: block;
text-align: center;
position: relative;
z-index: 3;
}
// JavaScript CSS Classes used to change initial CSS
.headerLogoBackGroundTransform {
/* to replace 'headerLogoBackground' */
position: sticky;
top: 0;
background-color: white !important;
transition: all .2s linear;
z-index: 10;
}
.headerMove { /* to replace 'headerLogo' */
margin-block-start: 0;
transform: translate(-10%, 0px) !important;
transition: transform .2s;
display: inline-block;
width: 30%;
float: left;
}
<html>
<head>
<title>...</title>
<link href="https://fonts.googleapis.com/css?family=Pinyon+Script|Squada+One&display=swap" rel="stylesheet">
</head>
<body id="body">
<div id="Welcome"><!--Wrapper div-->
<!-------------------------Top Section------------------------->
<header id="headerLogoBackground" class="headerLogoBackground">
<!--header-->
<h1 id="headerLogo" class="headerLogo"><a id="headerLogoLink" href="index.html">Lorem Dolo</a></h1>
<!--navigation-->
<nav id="navRaise" class="navRaise">
<ul id="navUl" class="navUlStyle">
<li><a id="topNav" title="Top" href="#Welcome"> Top </a></li>
<li><a id="servicesNav" title="Services" href="#Services"> Services </a></li>
<li><a id="contactNav" title="Contact" href="#Contact"> Contact </a></li>
</ul>
</nav>
</header>
</div><!-- end wrapper div -->
<!------------------------JavaScript Documents--------------------------->
<!-- I don't think path to external JavaScript file is relevant for stackoverflow code snippet -->
</body>
</html>
Related
I have a div tab on the right side of the screen in the middle and when I try to resize the window it moves the the bottom right of the screen. I would like to to stay in the middle regardless of screen size. How could I accomplish this with my current code? I've tried margin-left:auto and margin-right:auto but that didn't seem to work. I also can't necessarily change the position: because they need to those to make everything else work.
Any suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
font-family: 'Roboto Condensed', sans-serif;
}
#side-chat {
position: absolute;
right: 100%;
bottom:50%;
z-index:9999999999999 !important;
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
display:flex;
justify-content: center;
align-items: center;
color: #ffffff;
border-radius: 10px;
background: rgba(30, 175, 230, 0.5);
text-decoration: none;
padding: 15px;
font-size: 25px;
line-height: 20px;
text-align: center;
}
#olark-box-wrapper {
position: absolute;
z-index:99999999999999 !important;
top: 400px;
right: -300px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#olark-box-wrapper.chatbox-open {
right: 0
}
#olark-box-wrapper.chatbox-closed {
right: -300px;
}
#habla_window_div {
margin: 0 !important;
}
#side-chat img{
margin-right: 10px;
}
#side-chat:hover,
#side-chat:active {
background: #22a7e5;
}
</style>
</head>
<body>
<div id="olark-box-wrapper">
<!-- Olark chat tab -->
<a id="side-chat" href="javascript:void(0);" onclick="setTimeout(changeClass, 3);">
<img src="icon-chat.svg">
Chat
</a>
<!-- Empty Olark chat box container -->
<div id="olark-box-container"></div>
</div>
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
//olark.configure('system.hb_detached', true);
olark.configure('box.inline', true);
olark.identify('xxxx-xxx-xx-xxxx');</script>
<!-- end olark code -->
<script type='text/javascript'>
// Javacript function to toggle the class of the chat box wrapper
function changeClass()
{
// Get the HTML object containing the Olark chat box
var olark_wrapper = document.getElementById("olark-box-wrapper");
// If the chat box is already open, close id
if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
olark_wrapper.className = "chatbox-closed";
document.querySelector('#side-chat img').src = "icon-chat.svg";
}
// Otherwise add open the Olark chat box
else {
olark_wrapper.className = "chatbox-open";
document.querySelector('#side-chat img').src = "icon-cancel.svg";
}
}
</script>
</body>
</html>
You are placing your div relatively to the parent using absolute absolute positioning.
If the size of your wrapper is important, you should wrap it on another div, make it have the entire height of the page, position it on the right using and use a flex display as suggested by #ali-abbasov in your comment.
#wrapper-of-olark-box-wrapper {
position: fixed; // so that it stays positioned as you want regardless of the parent
top:0;
right:0;
height: 100%; // you can try 100vh if this one does not work
display: flex; // the solution
justify-content: right;
align-items: center;
}
I want to create an effect where if I hover over a certain element a paragraph element will be gradually displayed and vice versa (If the cursor is no longer hovering on the element the paragraph should gradually fade). I've already created the effect using pure CSS, but it was a bit cumbersome and it will only work if the paragraph is a direct child of the element I'm hovering on (which made it even more cumbersome). But here's how I created using CSS:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
overflow: hidden;
}
.FlexContainerRow {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1;
}
.FlixItem_Images {
width: 50rem;
}
#CheiftianTwo {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#welcome {
position: absolute;
z-index: 2;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: background-color color linear;
transition-duration: 1s;
color: transparent;
background-color: transparent;
margin-left: 13.75em;
margin-top: 6.4em;
padding: 0.2em;
border-radius: 0.4em;
}
#divForLayers {
position: absolute;
z-index: 1;
}
#divForhover {
height: 33.5em;
width: 100rem;
position: absolute;
z-index: 3;
}
#divForhover:hover #welcome {
transition: background-color color linear;
color: white;
background-color: black;
transition-duration: 1s;
}
<header>
<div id="divForhover">
<div id="divForLayers">
<div id="HeaderImagesContainer" class="FlexContainerRow">
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
</div>
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
</div>
</div>
</div>
<p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
</div>
</header>
<nav></nav>
<footer></footer>
But I've just learned that you can do the same thing with JavaScript and it will be much much simpler:
addEventListner('mouseover', function(evt) {
document.body.querySelector( /*ID_of_the_element*/ ).style.property = 'value';
})
The problem is that I only know how to to display the paragraph when the user hovers on the element, and that's it. If the cursor is no longer on the element, the paragraph will still be displayed. I don't know how to undo the addEventListener. I tried to do it with removeEventListener, but apparently I have the syntax wrong. Please tell me how to do it.
Here's the version with the JavaScript:
document.querySelector("#welcome").style.visibility = "hidden";
var imgOne = document.body.querySelector("#CheiftianOne");
imgOne.addEventListener('mouseover', function(evt) {
var textBox = document.querySelector("#welcome");
textBox.style.visibility = "visible";
});
imgOne.removeEventListener('mouseover', function(evt) {
var textBox = document.querySelector("#welcome");
textBox.style.visibility = "hidden";
});
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
overflow: hidden;
}
.FlexContainerRow {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1;
}
.FlixItem_Images {
width: 50rem;
}
#CheiftianTwo {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#welcome {
position: absolute;
z-index: 2;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: background-color color linear;
transition-duration: 1s;
color: white;
background-color: black;
margin-left: 13.75em;
margin-top: 6.4em;
padding: 0.2em;
border-radius: 0.4em;
}
#divForLayers {
position: absolute;
z-index: 1;
}
<header>
<div id="divForhover">
<div id="divForLayers">
<div id="HeaderImagesContainer" class="FlexContainerRow">
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
</div>
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
</div>
</div>
</div>
<p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
</div>
</header>
<nav></nav>
<footer></footer>
Assign the event handler function to a variable, or give it a proper name. Then add and remove that.
Your removeEventListener call is failing because you're passing it a unique function.
Also, you actually don't want to undo the event listener to achieve the effect you want. Instead, listen to separate events: mouseover and mouseout. For example:
var btn = document.getElementById('btn');
var par = document.getElementById('par');
btn.addEventListener('mouseover', function (e) {
par.style.visibility = 'visible';
});
btn.addEventListener('mouseout', function (e) {
par.style.visibility = 'hidden';
});
<button id="btn">Hover over me</button>
<p id="par" style="visibility: hidden;">This shows when hovering over the button</p>
The mouseover event occurs when the mouse hovers over an element, and conversely the mouseout event occurs when the mouse leaves the element.
When you call removeEventListener, you have to pass it the same function you passed addEventListener, not a different-but-equivalent one. This will never remove a listener:
imgOne.removeEventListener('mouseover', function (evt) { /* ... */ });
...because by definition, that exact function wasn't ever added previously.
Remember the one you used when adding, and use that same one when removing.
Separately: Adding the handler and then immediately removing it doesn't make a lot of sense. Nothing can happen that will trigger the handler between the calls to addEventListener and removeEventListener in your code. (Edit: Ah, rossipedia has picked up on why you did that, and his answer tells you want to do instead.)
Thanks, everyone. I figured out how to do it without a removeEventListener. (I used two addEventListener).
Thanks, again!
I'm having trouble getting some list elements back to their right place after resizing the window back from "#media screen and (max-width: 800px)".
These list elements are as default centered in line in the header and my goal is to have them displayed in my sidebar on smaller devices.
Right now everything works great when resizing from big screen to small screen but then I use some javascript in small screen mode to open and close the side menu and when I then try to resize it back to big screen size the list elements doesn't go back to where they are supposed to be.
They seem to stay aligned left of the page and not centered in line anymore.
Also I've checked for overrides in the css that could cause this problem but there seem to be none and it's strange that it works before I use javascript.
// för att öppna sidomenyn med 250 width
function openNav() {
document.getElementById("minHuvudmeny").style.width = "250px";
}
function closeNav() { <!--Script för att stänga sidomenyn med 0 width-->
document.getElementById("minHuvudmeny").style.width = "0";
}
body {
text-align: center;
background-image: url(bakgrund.jpg);
background-position: bottom;
background-size: auto;
font-family: 'Cuprum', sans-serif;
left: 0;
margin: 0; }
.navknapp { ****Here i put the nav list inline****
display: inline;
margin: 10px; }
#media screen and (max-width: 800px) {
.huvudmeny {
height: 100%;
width: 0;
background-color: #fff;
position: fixed;
z-index: 1;
overflow-x: hidden;
transition: 0.5s;
top: 0;
left: 0;
padding: 0;
padding-top: 60px;
}
.visameny {
display: block;
font-size: 50px;
text-align: left;
cursor: pointer;
position: fixed;
margin-left: 10px;
top: 0;
}
.ejvisameny {
display: block;
}
.huvudmeny .navknapp { Here i put the navlist back to blocks
display: block;
border: 1px solid black;
transition: 0.3s
}
.huvudmeny .navknapp:hover,
.offcanvas .navknapp:focus {
background-color: red;
}
.huvudmeny .ejvisameny {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
<header>
<h1 id=huvudRubrik>Välkommen till Daniels sida</h1>
<nav id="minHuvudmeny" class="huvudmeny">
✖
<li class="navknapp">Home</li>
<li class="navknapp">News</li>
<li class="navknapp">Contact</li>
<li class="navknapp">About</li>
</nav>
<span class="visameny" onclick="openNav()">☰</span>
</header>
I suggest that you add another media query for desktop (min-width:801px) where you assign a 100% width to a nav with !important.
#media screen and (min-width: 801px) {
.huvudmeny {
width:100% !important;
}
}
Thus, you'll override a Zero width of a nav, that sticks the menu to left edge.
demo
I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.
If you see the code sample I have shared, you can see the overlay going outside the box. I traced the issue down to the transition attribute.
I want to remove the content outside of the div. Overflow isn't working as it is supposed to. (removing transition works, but I would like to keep it if possible)
Any help is appreciated
Codepen Link
CODE
var timer = setInterval(function() {
document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;
if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {
clearInterval(timer);
}
}, 1000);
.qs-main-header .qs-timer {
padding: 13px 10px;
min-width: 130px;
text-align: center;
display: inline-block;
background-color: #dd8b3a;
color: #FFF;
font-size: 20px;
border-radius: 50px;
text-transform: uppercase;
float: right;
cursor: pointer;
position: relative;
overflow: hidden;
}
.qs-main-header .qs-timer-overlay {
z-index: 1;
width: 10%;
max-width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: #c7543e;
opacity: 0.0;
/* border-radius: 50px 50px 0px 50px; */
}
.qs-main-header .qs-timer-content {
z-index: 2;
position: relative;
}
.scale-transition {
-webkit-transition: all 1s;
transition: all 1s;
}
<div class="qs-main-header">
<div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer">
<div class="scale-transition qs-timer-overlay"></div>
<div class="qs-timer-content ng-binding">0 <span class="ng-binding">Sec(s)</span>
</div>
</div>
</div>
Actually it is the border-radius that is not getting respected when the transition is happening. This is because of creation of compositing layers for accelerated rendering and can be explained by having a look at the following articles:
HTML5 Rocks - Accelerated Rendering in Chrome
GPU Accelerated Compositing in Chrome.
Why does the issue not happen when transition is disabled?
When styles change but none of the criteria that necessitates the creation of a compositing layer is satisfied (that is, no animation or transition or 3D transform etc):
There is no compositing layer and so the whole area seems to get repainted at every change. Since a full repaint happens there is no issue.
View the below snippet (in full screen mode) after enabling "Show paint rects" and "Show composited layer borders" from Dev tools and observe the following:
No areas with an orange border (compositing layer) are created.
Every time the styles are modified by setting the focus on one of the a tags, the whole area gets repainted (a red or green blinking area).
.outer {
position: relative;
height: 100px;
width: 100px;
margin-top: 50px;
border: 1px solid red;
overflow: hidden;
}
.border-radius {
border-radius: 50px;
}
.inner {
width: 50px;
height: 50px;
background-color: gray;
opacity: 0.75;
}
a:focus + .outer.border-radius > .inner {
transform: translateX(50px);
height: 51px;
opacity: 0.5;
}
<a href='#'>Test</a>
<div class='outer border-radius'>
<div class='inner'>I am a strange root.
</div>
</div>
Why does adding a transition create a problem?
Initial rendering has no compositing layer because there is no transition yet on the element. View the below snippet and note how when the snippet is run a paint (red or green blinking area) happens but no compositing layer (area with orange border) is created.
When transition starts, Chrome splits them into different compositing layers when some properties like opacity, transform etc are being transitioned. Notice how two areas with orange borders are displayed as soon as the focus is set on one of the anchor tags. These are the compositing layers that got created.
The layer splitting is happening for accelerated rendering. As mentioned in the HTML5 Rocks article, the opacity and transform changes are applied by changing the attributes of the compositing layer and no repainting occurs.
At the end of the transition, a repaint happens to merge all the layers back into a single layer because compositing layers are no longer applicable (based on criteria for creation of layers).
.outer {
position: relative;
height: 100px;
width: 100px;
margin-top: 50px;
border: 1px solid red;
overflow: hidden;
}
.border-radius {
border-radius: 50px;
}
.inner {
width: 50px;
height: 50px;
background-color: gray;
transition: all 1s 5s;
/*transition: height 1s 5s; /* uncomment this to see how other properties don't create a compositing layer */
opacity: 0.75;
}
a:focus + .outer.border-radius > .inner {
transform: translateX(50px);
opacity: 0.5;
/*height: 60px; */
}
<a href='#'>Test</a>
<div class='outer border-radius'>
<div class='inner'>I am a strange root.
</div>
</div>
This illustrates that when the layers are merged back and full repaint happens, the border-radius on the parent also gets applied and respected. However, during transition only the compositing layer's properties are changed, so the layer seems to become unaware of the properties of other layers and thus doesn't respect the border-radius of the parent.
I would assume this to be because of the way rendering of layers work. Each layer is a software bitmap and so it kind of becomes equivalent to having a circular image and then placing a div on top of it. That would obviously not result in any clipping of content.
The comment in this bug thread also seems to confirm that a repaint happens when a separate layer is no longer required.
We want to repaint if "gets own layer" is going to change
Note: Though they are Chrome specific, I think the behavior should be similar in others also.
What is the solution?
The solution seems to be to create a separate stacking context for the parent (.qs-timer) element. Creating a separate stacking context seems to result in a separate compositing layer being created for the parent and this solves the issue.
As mentioned by BoltClock in this answer, any one of the following options would create a separate stacking context for the parent and doing one of them seems to resolve the issue.
Setting a z-index on the parent .qs-timer to anything other than auto.
var timer = setInterval(function() {
document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;
if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {
clearInterval(timer);
}
}, 1000);
.qs-main-header .qs-timer {
padding: 13px 10px;
min-width: 130px;
text-align: center;
display: inline-block;
background-color: #dd8b3a;
color: #FFF;
font-size: 20px;
border-radius: 50px;
text-transform: uppercase;
float: right;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1; /* creates a separate stacking context */
}
.qs-main-header .qs-timer-overlay {
z-index: 1;
width: 10%;
max-width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: #c7543e;
opacity: 0.0;
/* border-radius: 50px 50px 0px 50px; */
}
.qs-main-header .qs-timer-content {
z-index: 2;
position: relative;
}
.scale-transition {
-webkit-transition: all 1s;
transition: all 1s;
}
<div class="qs-main-header">
<div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer">
<div class="scale-transition qs-timer-overlay"></div>
<div class="qs-timer-content ng-binding">0 <span class="ng-binding">Sec(s)</span>
</div>
</div>
</div>
Setting opacity to anything less than 1. I have used 0.99 in the below snippet as it doesn't cause any visual difference.
var timer = setInterval(function() {
document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;
if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {
clearInterval(timer);
}
}, 1000);
.qs-main-header .qs-timer {
padding: 13px 10px;
min-width: 130px;
text-align: center;
display: inline-block;
background-color: #dd8b3a;
color: #FFF;
font-size: 20px;
border-radius: 50px;
text-transform: uppercase;
float: right;
cursor: pointer;
position: relative;
overflow: hidden;
opacity: 0.99; /* creates a separate stacking context */
}
.qs-main-header .qs-timer-overlay {
z-index: 1;
width: 10%;
max-width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: #c7543e;
opacity: 0.0;
/* border-radius: 50px 50px 0px 50px; */
}
.qs-main-header .qs-timer-content {
z-index: 2;
position: relative;
}
.scale-transition {
-webkit-transition: all 1s;
transition: all 1s;
}
<div class="qs-main-header">
<div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer">
<div class="scale-transition qs-timer-overlay"></div>
<div class="qs-timer-content ng-binding">0 <span class="ng-binding">Sec(s)</span>
</div>
</div>
</div>
Adding a transform to the element. I have used translateZ(0px) in the below snippet as this also doesn't create any visual difference.
var timer = setInterval(function() {
document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;
if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {
clearInterval(timer);
}
}, 1000);
.qs-main-header .qs-timer {
padding: 13px 10px;
min-width: 130px;
text-align: center;
display: inline-block;
background-color: #dd8b3a;
color: #FFF;
font-size: 20px;
border-radius: 50px;
text-transform: uppercase;
float: right;
cursor: pointer;
position: relative;
overflow: hidden;
transform: translateZ(0px) /* creates a separate stacking context */
}
.qs-main-header .qs-timer-overlay {
z-index: 1;
width: 10%;
max-width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: #c7543e;
opacity: 0.0;
/* border-radius: 50px 50px 0px 50px; */
}
.qs-main-header .qs-timer-content {
z-index: 2;
position: relative;
}
.scale-transition {
-webkit-transition: all 1s;
transition: all 1s;
}
<div class="qs-main-header">
<div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer">
<div class="scale-transition qs-timer-overlay"></div>
<div class="qs-timer-content ng-binding">0 <span class="ng-binding">Sec(s)</span>
</div>
</div>
</div>
The first two approaches are more preferable than the third because the third one works only on a browser that supports CSS transforms.
Yes, adding opacity: 0.99; to .qs-timer issue will fixed.
When opacity: 1 OR NOT define:
In this special case, there is no transparency involved so that gfx could avoid doing the expensive things.
In case Opacity: 0.99:
nsIFrame::HasOpacity() decides that there is an opacity, so gfx include valuable things. ( likes opacity with border-radius)
For more help Special case opacity:0.99 to treat it as opacity:1 for graphics , This ticket is not providing the opinion of our actual goal, but giving the idea about what is happening inside of CSS.