- This topic is empty.
June 9, 2015 at 1:01 am #203447
I am using css3 transition opacity for smooth mouse over and out animation.
But i have noticed that there is a glitch coming in image 3.
here is the URL of my website http://new.lettucebeekids.org/image-test/
the interesting thing is that it only appears in chrome and opera.
I asked similar question before but couldn’t get the answerJune 9, 2015 at 1:32 am #203450Paulie_DMember
Looks fine to me.June 9, 2015 at 2:09 am #203454
u dont see any glitch in any image specially image 3? in chrome? i mean the third image gets bigger an smaller on mouse hover in chrome why is this so? u should we very carefull while seeing this behaviourJune 9, 2015 at 2:18 am #203455Paulie_DMember
u dont see any glitch in any image specially image 3
Nope…June 9, 2015 at 2:20 am #203456
But why is it coming on my side on 3rd image in chrome? any ideaJune 9, 2015 at 2:25 am #203458
Please review this fiddle http://jsfiddle.net/n9e7ove4/
just hover on third and fourth image and u will see gap and glitchJune 9, 2015 at 6:18 am #203480Ryan YurkaninParticipant
What you are encountering is definitely a Blink problem so it makes sense that it effects both Opera and Chrome.
First, I’ll tell you the solution to your problem is to add:
-webkit-transform: translateZ(0); width: calc(100% + .49px);
to all of your images.
Secondly, here is the fiddle to prove it: https://jsfiddle.net/n9e7ove4/2/
Third, I’ll explain why this solution works. The problem was being caused by fractional widths. For example using 100% width you could end up with a image that had width: 150.79px. Before the transition it would be rounded up to 151px, but during the transition it would be rounded down to 150px. By using a Transform on the image it follows the same process as when you are transitioning the opacity, thus you have consistent widths, then by adding .49px it makes sure all of the image widths will be rounded up.
Hope that works out for you :^)
EDIT: Updated Codepen!June 9, 2015 at 10:24 pm #203510
Perfect. Thanks, Will implement live and will hope its perfect there as well.June 10, 2015 at 4:41 am #203535
The blink and gaps are gone it is looking perfect. but i have encountered a new problem. The first css1 has 3 images one colored, second yellow with sad boy and third with plain yellow. I applied css so that hovering on 2-5 images will show plain yellow image in 1st image. it was working fine but after adding new width and transition which u provided its not working in chrome.
Please have a look and give me ur feed back.
https://jsfiddle.net/n9e7ove4/3/June 11, 2015 at 10:57 am #203589Ryan YurkaninParticipant
It seems as though your .sad element has a higher z-index then that of your .bottom element. I would suggest specifically setting their z-index using the z-index property.June 11, 2015 at 10:35 pm #203636
- The forum ‘CSS’ is closed to new topics and replies.