I got a simple animation on my website. Basically an image going from one edge of the screen to the other, flipping and then going back:
#gans {
padding-top: 9rem;
position: absolute;
-webkit-animation: ease-in-out infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 15s;
}
#-webkit-keyframes run {
0% {
right: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
right: calc(100% - 190px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
right: 0;
-webkit-transform: rotateY(0deg);
}
}
It works perfectly on Edge, Firefox, Chrome and even the IOS version of Safari.
But on the versions mentioned in the title, the image just vanishes (the div still moves as it’s supposed to) and reappears after flipping back around.
The website can be found under this link
Any suggestions are greatly appreciated
Greetings from Germany
On a different post, someone suggested using backface-visibility or changing the z-index of the element. Both were unsuccessful. But if I change the rotation by + or -1, half of the image appears
It seems to start working properly in Safari 16.3 on MacOS if you add position: relative to <div class="row"> which wraps <div id="gans">...</div>
I don't know the reason for this, but my guess is that Safari on MacOS (don't have an iPad to test) somehow loses the position of the element relative to the document body during the animation. "An element with position: absolute; is positioned relative to the nearest positioned ancestor [...] if an absolute positioned element has no positioned ancestors, it uses the document body [...]" (src). nearest positioned ancestor is the crucial point here. That's why explicitly setting the container position should resolve this.
Related
The same CSS is displayed differently in Firefox / Chrome.
Specifically it seems width: fit-content; gets treated differently. It seems like Blink ignores it in this case.
In any case, I like to try to understand what's going on, which engine does it more correctly, or whatever the error is.
I know this is probably not very good CSS and fitting the image can probably be done better with flexbox and/or object-fit. (other good suggestions are welcome)
Still I'm am wondering why the image is treated like that.
Firefox seems to fit the img to 400x600. Changing max-width, will resize its width, up to a maximum (I assume the intrinsic with).
For Chrome removing width: fit-content; does change nothing. Chrome seems to try its best to keep the aspect-ratio and not filling the width to its intrinsic width.
Switching width: fit-content; for width: 1000px; will make both browsers behave the same again. So it seems it's actually fit-content specifically that's gets different treatment.
EDIT:
Asking who's right, is not meant to be subjective, rather, which engine adheres to the (html5) specs "more", if this can even be said. Or maybe there's an correction algorithm, bc the CSS is bad?
Even more curious is, that Firefox, does actually not very well fit the div to the img size. The div in both cases is the same size. This can easily be viewed in the inspector or, when adding an animation to the img like so:
.rotate {
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
And add rotate class to the img element.
The div will have 313.44 x 400 and 313.45 x 400 (almost) the same size.
To Test this please go to:
https://codepen.io/pen/?editors=1100
(Even on codepen, to experience the difference yourself, you must install both browsers and execute the code in both of them to see the difference life. Originally I found this while developing a website locally, so the issue is independent from codepen ofc.)
THANKS!
HTML:
<div style="margin: auto; width: fit-content; background-color: red;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Patrick_Stewart_Photo_Call_Logan_Berlinale_2017_%28cropped%29.jpg/800px-Patrick_Stewart_Photo_Call_Logan_Berlinale_2017_%28cropped%29.jpg" class="test" />
</div>
<h1>Chromium, Edge or Firefox</h1>
CSS:
.test {
margin: 16px;
max-height: 400px;
max-width: 600px;
display: block;
background-color: blue;
width: fit-content;
}
Chrome: not stretched
Firefox: is stretched
I have a graphic image that is placed on an html page. I would like to run an animation which slides the graphic image from the middle of the page on the left border to the middle of the screen. Once the graphic image reaches the center of the screen, I want the animation to slide the graphic image diagonally from the center of the screen to the top left corner of the screen. Is this possible?
This is what I have that slides the image from the left margin to the center of the screen:
#img1 {
bottom: 50%;
display: block;
position: absolute;
animation: linear;
animation-name: image1;
animation-duration: 10s;
}
#-webkit-keyframes image1 {
0% {
left: 0;
transform: translateX(0);
}
100% {
left: 50%;
}
}
Thank you.
If I understand what you are asking, you just need another keyframe in your animation. Your current final frame would be changed to 50% and then adding 1 final frame at 100% would allow you to set the CSS for the final frame (being in the top-left corner).
#img1 {
top: 50%;
display: block;
position: absolute;
animation: image1 10s linear forwards;
}
#-webkit-keyframes image1 {
0% { left: 0; transform: translateX(0); }
50% { left: 50%; top: 50%; }
100% { left: 0; top: 0; }
}
<div id="img1">IMAGE</div>
You may still want to play with timings and such, but that shouldn't be too hard. You can increase the animation time in the CSS and add additional frames to create pauses/etc.
Is it possible to cut a triangle from a <div> like in the picture below?
The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.
The illusion of it is possible: http://jsfiddle.net/2hCrw/4/
Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.
::before and ::after pseudo elements are skewed to provide a side of the triangle each.
Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
Elements can still be styled with borders, shadows, etc.
Anything underneath will show through properly.
Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/
This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).
You can do something like this with CSS masks (examples):
http://codepen.io/anon/pen/vgbEH (anti-triangle mask)
http://codepen.io/anon/pen/pEufn (triangle mask)
I used clip-path: polygon(…) property but only my Chrome seems to support it; you could instead create polygon images and reference them with mask-image for broader support.
It isn't possible to cut from divs in css, but it is possible to use an image overlaying the div to make it look like it has been cut.
.triangle{
background-image: url('cut.png');
width: 24px; height: 24px;
z-index: 1;
position: absolute; top: 32px; left: 15px;
}
It looks like there’s a bit of a drop shadow on your <div> as well, which I’m guessing the triangle should respect.
CSS doesn’t currently provide a way to achieve this directly. One approach would be to create an image of the green bottom area of the <div> with the triangle cut-out in it (using e.g. Photoshop), set it as the background of a <div> inside your original <div>, and position it outside of your original <div>.
Here’s a JS Fiddle example that hopefully explains the idea:
http://jsfiddle.net/7y6nz/
I am using the method outlined here to fade in a background image on hover of an element.
My codepen example:
http://codepen.io/anon/pen/vqtjf
HTML:
<div><span></span></div>
CSS:
div {
position: relative;
width: 219px;
height: 218px;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-off.png) no-repeat;
}
span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-energy.png) no-repeat;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
div:hover span {
opacity: 1;
}
The problem I'm having is that in Firefox (Mac) the background image of the span is not quite aligned with the background image of the span so when it fades in you can see a small movement (In the codepen the shift is vertical but in my project where the code is amongst a whole lot of other junk I actually had a horizontal shift). If you resize the Firefox window the problem is fixed.
A screencast of the effect can be seen here:
https://dl.dropboxusercontent.com/u/3454522/firefox-fadebg-problem.mp4
(View at 100% to see the problem which is subtle).
Any idea on whats causing this or how to fix?
I think it's a regression in how Firefox renders images with opacity animation, especially when the images has been resized with HTML width/height attributes (usually by more than half).
The effect can be very subtle like a slight off-setting (~1 px) or a kind of antialiasing.
STR:
1. Open the testcase I joined
2. Move the mouse over the images to animate the opacity
3. Try at different zoom levels to observe the off-setting/antialiasing
WORKAROUND: adding "box-shadow: #000 0em 0em 0em;" to images fixes the bad rendering.
source: https://bugzilla.mozilla.org/show_bug.cgi?id=745549
I had the same problem. Solved it by adding the following to the images css.
transform: translate3d(0,0,0);
I've got a question concerning webkit marquee. I've got 2 elements of a variable width. (The 2 elements are the same width), and both elements need to be a marquee.
However when the content has overflow (is larger then the element) I need a marquee, if not the text should remain as it is (no scrolling).
I've created a JSFiddle as an example:
http://jsfiddle.net/Vxwed/:
The long and short both need to be marquee'd through CSS3, while the long should scroll and the short one doesn't.
<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>
Remember, the contents of the elements are variable (filled with javascript), so I cant do actual hardcoding on the elements marquee-behaviour.
Any CSS experts here able to help me? I've been researching this a lot but there is little information about this subject, since it's relatively new.
The only solution that I'm able to think of right now is using jQuery to measure the width of the elements, and then calculate if they need extra spacing. If they need apply marquee, else don't. But that doesn't seem very clean to me, I'd rather do this in HTML/CSS only if possible.
This probably doesn’t do exactly what you want but it was a good problem to look at: http://jsfiddle.net/4hgd8ac1/
It uses CSS animations to animate the transform: translateX percentage as this is based off the width of the element itself. This means we can scroll an element it’s full width left. By then giving the marquee a minimum width we can standardise the shorter text lengths. Then we use calc(100% + 100px) move the item 100% left except the width of the carousel (100px).
It doesn’t quite have the traditional marquee feel with the text scrolling fully but using the animation keyframes it is possible to pause at the end of the text to give the user time to read.
p {
height: 30px;
width: 100px;
background-color: #CCC;
white-space: nowrap;
}
.marquee {
overflow: hidden;
position: relative;
}
.marquee__content {
padding: 5px 0;
margin-right: 100px;
position: absolute;
height: 20px;
animation: scroller 3s linear infinite;
min-width: 100px; /* This needs to match the width of the parent */
}
#keyframes scroller {
0% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
20% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the end for 20% of the time */
80% {
/* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
transform: translateX(calc(-100% + 100px));
}
100% {
transform: translateX(calc(-100% + 100px));
}
}
<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>