I seem to have an issue in Chrome 83 with a duo-monitor setup (144hz primary, 60hz secondary), not sure if it's a bug with Chrome, a bug with my code, or intended behavior. I'll explain my test case first.
I've got two divs. One has a hidden iframe, we'll get to why later.
<div id="content1"></div>
<div id="content2">
<iframe id="video" hidden ...></iframe>
</div>
Both divs are the size of the viewport, with the latter one being fixed to peek out from the bottom of the viewport, appearing as a footer. The animation I want is for the footer to slide up and cover the entire viewport, and then slide back down again. I'm doing this by animating transform: translateY(); which should be performant. Here is the CSS.
#content1 {
height: 100vh;
}
#content2 {
position: fixed;
top: calc(100vh - 50px);
height: 100vh;
width: 100%;
transform: translateY(0);
transition: transform 350ms ease-in;
}
#content2[show] {
transform: translateY(calc(-100vh + 50px));
}
This is buttery smooth on my 144hz monitor, staying steady at around 144(+-10) FPS. However, dragging Chrome over to my 60hz monitor I suddenly get terrible stuttering and uneven framerate, anywhere from 200 FPS to 30 FPS.
And here is another strange thing. If I play a video in the footer div, such as by embedding a YouTube video with an iframe, suddenly the performance stays solid at 144(+-10) FPS, still on my 60hz monitor.
I've also tried with Chrome halfway between the two monitors, and this behaves the same as only having it on the 60hz. It only seems to behave properly when it's solely on the 144hz.
This issue affects all CSS transitions, I've tried it with the transform, opacity and top properties. It does however not affect scrolling performance.
Here is a codepen with the example: https://codepen.io/Ophion/full/BajJEjm Click the footer to trigger the animation, and hit space to reveal the YouTube video inside of the footer.
I'm really curious if anyone else can reproduce this issue or knows why it happens.
Related
I have a CSS slideshow which is displaying differently in Firefox and Chrome. What is notable about the CSS is that one "figure" is a div containing two images - while the first figure is a simple image, the second figure is a div containing a background image and a smaller image to be overlaid onto it.
In Firefox 57 the slideshow displays "correctly", as I intended. But in Chrome 62 upon initial display the overlay image appears atop the first slide - whereas it should only appear atop the second slide. But this happens only on the initial display (or when re-loaded) - thereafter, as the slideshow repeats, the first slide appears as it should, without the overlay image.
I have a stripped-down working JSfiddle example at https://jsfiddle.net/glendeni/uwb13z87/
(note that it behaves ala Chrome, not ala Firefox)
I believe the crux is in the following CSS
#figure-container { position: relative; }
#top {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
with the second figure HTML
<figure>
<div id="figure-container">
<img class="center" src="second_slide.jpg">
<img id="top" src="second_slide_overlay.png">
</div>
</figure>
I would like to know if there is some CSS or Javascript I can add which would prevent Chrome from initially displaying the overlay image, since the current behavior is going to prevent me from using the overlay image.
The z-index on the overlay is causing it to display above both the first and second slides. However, you only see it above the first slide on the first run, because after the 2 second delay, the animation starts, and sets its opacity to zero on the next time.
You can fix this by setting an even higher z-index on your first slide, like so:
.css-slideshow-header figure:nth-child(2) {
animation: xfade 4s 0s infinite;
position:relative;
z-index:2;
}
Hello I have a div with a background image on my website set up so when you hover over it, it changes background images.
It works correctly but the only issue is that there is a slight delay when switching images, probably a 0.2 second delay. So when you hover over it, the div turns blank for 0.2 seconds and then the new image appears.
Does anyone know what is causing this issue? I am thinking it has to do with the speed in which the hover image loads, if that is the case then there probably isn't a solution for this issue and I will just have to live with it.
There is no javascript or jQuery associated with the div at all.
Here is my code.
HTML:
<div class="video-button">
</div>
CSS:
.video-button {
background: url('images/playbutton.png') center center no-repeat;
height: 113px;
width: 113px;
}
.video-button:hover {
background: url('images/playbutton-h.png') center center no-repeat;
}
Load that second image in another div that is out side the screen view (not visible) .
Once that image is loaded browser won't need to call it again, it will use cache to show it on hover.
I use google fonts to show some h1 tag. Initially, this h1 tag is hidden using:
visibility: hidden;
opacity: 0
I then slowly reveal the text when you hover over it with the following:
.content:hover{
visibility: visible;
opacity: 1;
transition: opacity ease-in-out 1s;
}
See here for demo: http://codepen.io/gosusheep/pen/oXEyve
Whenever the content becomes fully visible, it jumps a bit.
This jumping does not happen when the content is already visible.
This content does happen with other non-websafe fonts (e.g. Georgia).
Does anyone know a way around this?
After adding a margin: 20px, everything works as expected. I was able to keep the transform as well.
What I believe is happening is that the font requires more space than the content div actually has. When opacity reaches 1, the text is fully rendered and goes outside the bounds of the div, causing a small shift.
the problem is not with the visibility, the problem is the transform and transition together, try center the content with top: 50%; and margin-top: negative_half_of_the_div_heigh;.
I am trying to bring two objects (a cable and a cable cover) together in the center of the screen using CSS animation (ultimately showing the cover going over the cable).
The animation should be this: the cable will fade in and slide in from the right of a responsive (100% width) div, and the cover will fade in and slide in from the left; the cover will be assigned a higher z-index so that it sits on top of the cable end, giving the appearance that it has covered the cable.
Ideally, the animation would be triggered by a button click, since the experience needs to be the same on desktop and mobile. The two objects would have to come together (and slightly overlap) in the center of the div (no matter its current width). The animation is not required to reverse itself once completed.
Does anybody have any leads on how this might be achievable? I, for the life of me, can't wrap my head around how this would be accomplished. I appreciate any help here!
The basic idea would be to start by positioning one element off the left side of the screen: right: 100%
and the other element off the right side of the screen: left: 100%
When the user triggers the change, bring both elements to the center of the screen by setting left/right to 50%.
As an example, here is a rudimentary (and webkit specific) version:
html:
<button id="doit">show me</button>
<div class="cover">cover</div>
<div class="cable">cable</div>
CSS:
.cover, .cable {
position: absolute;
top: 100px;
width: 100px;
height: 25px;
color: white;
-webkit-transition: all .5s ease;
}
.cover {
right: 100%;
background-color: green;
}
.cable {
left: 100%;
background-color: red;
}
javascript:
var doit = document.querySelector('#doit');
doit.addEventListener('click', function() {
var cover = document.querySelector('.cover');
var cable = document.querySelector('.cable');
cable.style.left = "50%";
cover.style.right = "50%";
});
jsfiddle demo
In terms of animations, CSS3 transitions work best in my opinion, as they are far faster and easier to do, however the drawback is that you can only use one animation at a time. A good jQuery library to manage these is http://ricostacruz.com/jquery.transit/. If you need more functionality (and can sacrifice some speed) look at http://julian.com/research/velocity/.
jQuery button clicks are really easy to do:
$('#btnid').click(function() {
// Stuff happens here
});
More information on this can be found at http://api.jquery.com/click/.
Finally, for the CSS. I imagine that this will be the hardest part. You can set the cable images using background-image (http://www.w3schools.com/cssref/pr_background-image.asp). I recommend that you set both elements to position: absolute and then set the one on top to z-index: 99999 (never just use 1). Finally, you can fiddle around with the top, left, and margin CSS attributes if there are some problems with alignment. You may have to put both images in a parent div.
Hope this helps!
I have a weird problem with my personal website. Let me explain the context:
I have some stacked sections which have to be (each one) the same height as browser window. That is, if the browser window has 500px of height and I have 5 sections, the whole website would be 500*5 = 2500px height.
If I just define my sections with height: 100% them remain 0px height. To solve that I used the next trick:
html, body {
height: 100%;
}
This way, the container of the sections (the body) has also 100% height of the browser window, so my sections now have the desired height.
But after that, I want that the background color of the body changes depending on the section we are. This causes an strange problem. The color doesn't change in a logical way. Better see it on my website. This seems to be related with the fact that the body is actually smaller than my website. Remember, my body has 100% height (for example, 500px) and my website 100% * number of sections (2500px). But I'm not really sure about that because I tried to reproduce the error on a simple fiddle and I can't.
A curious thing is if you mouseover my website logo (which have a transition animation related with a rotation transform) the background change its color correctly. Something related with website refreshing, I suppose.
By the way, the color of the body is also changing with a transition, but you can disconnect it on the inspector if you want. That seems no to be the problem.
If you need more information please ask for it. Thank you for your help and attention.
PS: This happens on Chrome 32. In Firefox all works. So compare both browsers to understand better the problem, if you want.
I partially solved the problem with pseudoelements (then, I don't lose the semantics of my html) but I'm not satisfied because I think it has to be a better and cleaner way.
I put all the sections inside a div called "main-content" (of the website). Then I also defined this div with height: 100% (otherwise the height trick stops working). Then I define a before pseudoelement with this css:
#main-content:before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
-webkit-transition: background-color $speed;
-moz-transition: background-color $speed;
-o-transition: background-color $speed;
-ms-transition: background-color $speed;
transition: background-color $speed;
}
And then I attach to this fixed layer pseudoelement all the changing background color code, instead of using body. This works, but fixed elements and mobile browsers aren't good friends. So I think that this problem deserves a better solution.