I have 3 elements that is growing on :hover using a CSS transition. Two of them work just fine, but the last one is flickering in Firefox, but works in Chrome and IE. So the problem is only there in Firefox.
CSS:
.contact{
width: 300px;
height: 250px;
margin: 10px;
margin-top: 37px;
float: right;
background-color: #eca83b;
border-radius: 10%;
transition: 0.5s;
}
.contact:hover{
width: 320px;
margin: 0px;
margin-top: 27px;
height: 260px;
}
HTML:
<section class="contact">
<svg>
</svg>
<h2 class="item">Contact</h2>
</section>
What can cause this problem?
I had exact same issue: on several sites I've built that use CSS transform scale, there's a flicker the first time you hover over the images. Afterwards they're fine. Doesnt happen on any other browser, and is only recent - obviously a bug in later versions of FF.
Anyway, just fixed it by, of all things, altering the greyscale filter. Try this CSS on your img:
filter: grayscale(1%);
It makes no noticable difference to the colour, but the flicker is gone!
backface-visibility: hidden tends to fix a lot of flickering issues, try giving it a shot.
Try putting:
will-change: transform;
Into your .contact
this will pre-render your object into 3d so it should not flicker.
Sometimes it also helps to put it into your class's children, like if you have
.contact > .img or something.
Add -moz-transition: for Firefox i have update in code here
give this a try it should work
.contact{
width: 300px;
height: 250px;
margin: 10px;
margin-top: 37px;
float: right;
background-color: #eca83b;
border-radius: 10%;
transition: 0.5s;
-moz-transition: 0.5s;
}
.contact:hover{
width: 320px;
margin: 0px;
margin-top: 27px;
height: 260px;
}
None of these worked for me, however I worked around the issue by setting visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.
Related
I've created a div-circle in which I want to hold (1) an image and (2) three div-waves (see image). My solution is working on desktop with Chrome, Firefox, Microsoft Edge, Internet Explorer. However, on my iPhone, the overflow doesn't work at all, either in safari or chrome. Here's an image of the difference in result. The relevant HTML looks like this:
<div class="circleContainer">
<div class="wavesContainer">
<div class="wave1" />
<div class="wave1" />
<div class="wave1" />
</div>
<img />
</div>
And the relevant CSS code looks like this:
.circleContainer {
border-radius: 300px;
height: 200px;
width: 200px;
background-color: #232323;
overflow: hidden;
position: relative;
border: #404040 solid 4px;
background-image: URL("pathToBackgroundImage");
background-size: 300px;
background-position: -20px;
transition: .5s;
opacity: 1;
}
.wavesContainer {
transition: .5s;
opacity: 1;
}
.wave1,
.wave2,
.wave3 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
}
.circleContainer img {
height: 220px;
top: 28px;
left: 18px;
opacity: 1;
transition: .5s;
position: absolute;
}
NOTE: The HTML and CSS are simplified, but I think the code above is all that is necessary to solve this issue.
Here is the code if you want to see it for your self: https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/
I am pretty experienced with CSS and still nothing I've tried work, so you guys are my last hope. I appreciate all the help I can get!
I solved this with a rather brute-force solution. Namely to create a rectangular shape (the red one in this image) with a transparent circle cut, as seen in this thread. I could then hard code some of the z-indices such that the rectangle only hides what I want it to. I also added a new circle with a border (the green one in this image) so I could keep the border around the circle.
It wasn't the solution I was hoping for, but it fully solved my problem!
My goal is to make a circular icon button wherein a single icon is enveloped by a circle, and the circle shrinks on hover, but the icon stays centered.
I got this effect working in Firefox and Chrome, but in Safari 9 (I assume it's similar in Safari 10), when I hover over the buttons, their vertical position occasionally moves up and down unexpectedly. It seems to mostly occur when rapidly changing which button is being hovered.
This is the HTML structure of the button:
<a class='icon-button'>
<button>
<span class='bg'></span>
<span class='icon'>A</span>
</button>
</a>
This is the SCSS code I am applying:
.icon-button {
$width: 2em;
display: inline-block;
width: $width;
height: $width;
overflow: hidden;
cursor: pointer;
button {
position: relative;
display: flex;
align-items: center;
text-align: center;
width: $width;
height: $width;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
}
.bg {
background-color: #FF9999;
width: $width;
height: $width;
border-radius: $width / 2;
margin: 0 auto;
transition: width 128ms linear, height 128ms linear;
}
&:hover .bg {
width: 0.8 * $width;
height: 0.8 * $width;
}
.icon {
color: #FFF;
position: absolute;
top: 0;
left: 0;
line-height: $width;
width: 100%;
}
}
Here is a JSFiddle page where I replicated the issue with the relevant code: https://jsfiddle.net/Auroratide/6u463jL5/3/
Does anyone know what is causing this to happen in Safari but not the other browsers? I'm probably going to need to change my strategy so the CSS is not as jank, but I'm curious nonetheless.
UPDATE:
Here a link to a video of what I am seeing, contrasting Firefox with Safari:
http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov
Try adding
-webkit-transition: width 128ms linear, height 128ms linear;
The -webkit- refers to browsers such as Chrome and Safari, so will hopefully fix the problem you're experiencing.
It seems that the below CSS fixes this:
.icon-button {
position: relative;
}
.icon-button button {
position: absolute;
top: 0; left: 0;
}
I'm still not really sure what was going on in Safari, but it seems to have been a positioning issue relative to the size of adjacent elements (I had noticed the issue does not arise on a button in isolation). Absolute positioning guarantees the elements are positioned based solely on the parent, so I'm guessing that's why this fixes the issue.
If an image in an element with a decimal width is animated using css (opacity), the image loads at a fixed pixel width then after completing the transition changes size to the correct decimal pixels.
I have tested this on Chrome only. See the fiddle, which shows the problem only when using css animations. http://jsfiddle.net/minlare/kext0af4/
.opacity{
width: 400px;
}
.opacity div {
width: calc(100% / 3);
float: left;
}
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
}
.opacity img.visible{
opacity: 0;
}
Any way around this?
I solved adding outline: 1px transparent solid;
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
outline: 1px transparent solid;
}
Fork: http://jsfiddle.net/0dvvd1n1/
Also backface-visibility: hidden; solves the issue but the outline approach doesn't create sharpened edges.
Another method to sort of solve it is to add translate:transformZ(0) This forces GPU rendering, which corrects the jumping in the version I tested it in (Chrome 43.0.2357.132 on Mac). However, it can cause issues if there are a large number of GPU rendered elements that have transitions.
http://jsfiddle.net/kudj7zxn/
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
transform: translateZ(0);
}
i've just made social media icons for my website. i wanted to look them a bit more interesting, so i put overlays on them, which appears, when you moving the hover over it.
i've tried to use
#bla:hover {
background-image: overlay.png;
}
but it didn't worked. Link here: http://tdfts.com/projects/akvile_test/
I also tried this (sorry i cannot really explain :D): http://tdfts.com/projects/akvile_test/website/
But this still did not work well, and looked awful in ie and ff.
do not mind the position of the social media bar.
the overlay should have a transition.
thank you in advance
Demo ..
CSS
.social-item{
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
float: left;
margin: 5px;
}
.social-item .original{
width: 100%;
height: 100%;
}
.social-item .over{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.social-item:hover .over{
opacity: 1;
}
HTML
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>
Hope this will help you ..
According to your style above, instead of that you should use
#bla:hover {
background-image: url('overlay.png');
}
The url inside should have the correct location.
Regarding the position, you need to make the div which contain the overlay.png should be absolute. [position: absolute; top: 0;]
And make sure the parent a should be relative or absolute
You have
#fb {
height: 40px;
width: 40px;
background-image: url(img/socialmedia/fbhover.png);
}
in your style.css (line 72) thats causing the background-image to be applied automatically. Instead, you would want something like:
#fb {
height: 40px;
width: 40px;
}
#fb:hover {
background-image: url(...);
}
However, I doubt this is what you want. Setting a background-image on an <img src="foo.png"> will just show the background-image behind foo.png, and I'm guessing you want to replace the image entirely.
So you have two options:
1) Easier: Use jQuery's .hover() and .attr("") change the src of the <img> with Javascript.
2) Harder / Uglier (but doesn't require JS): Make two divs, one on top of the other. Make your default image be on the bottom and the hover one be on the top. Set the top div's opacity to 0 and then do a CSS :hover selector that changes the top div's opacity to 1. Frankly, I'd go with the first option.
You can apply some css like I did for facebook overlay
#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}
top in -25px;
use this
#overlayfb:hover {
top: -25px;
}
I think it will work for you
i have a div element that is appearing fine in Chrome but Firefox for some reason has decided to put a border around it. let me share the CSS here:
#cpanel {
width: 320px;
height: 75px;
position: absolute;
//left: 28%;
//top: 32%;
z-index: 9996;
//visibility: hidden;
display:none;
}
.box {
z-index:9997;
//border: 1px solid #000;
width: 75px;
height: 75px;
float:left;
margin-left: 2px;;
/*display: block;*/
background-color: #000;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.box .text{
width: 75px;
text-align: center;
color: white;
position: absolute;
//top: 40%;
z-index: 9998;
}
#cpanel.on {
visibility: visible;
}
the cpanel is the outermost div. the .box divs are small boxes inside the cpanel div. and these boxes somehow have 1px white borders that arent present in chrome. i want to remove those borders. thanks.
Use FireBug plugin to view the CSS and see where the border is coming from.
Probably you have bloated CSS file and you have lost in it :) Simplest solution is just to add border:none to .box class. Finding your bad border source of course could help, but it could be needed somewhere else and could not be removed.
I suggest also to do simple ctrl+f in css file for 'solid white'.