Image flickers off scale when using transform

[everlive]

So I am using transform: scale(); in CSS on an image but it seems on the first hover, for a split second it scales the image down and then back up.

This only happens on the image. I tested it on the parent anchor and no flicker or off scale. Furthermore, it only seems to happen when the image is above a certain size on the browser and it does not occur when the image is below something around 100 pixels.

Backface-visibility and transform3d with all the prefixes do nothing to correct this and it does not appear to be a normal solvable flicker but something else entirely.

Any suggestions?
HTML:

<div id="agility-box" class="fallset-1">

<div class="agility-block">
	<a href="http://www.google.com">
		<div>
			<span>Frame It</span>
		</div>
		<img src="images/8.jpg" alt="imager-8" />
	</a>
</div>

</div>

CSS:

.fallset-1,
.fallset-2 {
	width:100%;
	overflow:hidden;
}

.fallset-2 {
	padding-right:1%;
}

.fallset-1 .agility-block {
	width:25%;
}

.fallset-2 .agility-block {
	width:24%;
	margin: 1% 0% 0 1%;
}

.fallset-1 .agility-block,
.fallset-2 .agility-block {
	float:left;
}

.fallset-1 .agility-block a,
.fallset-2 .agility-block a {
	position:relative;
	display:block;
	overflow:hidden;
}

.fallset-1 .agility-block a > div,
.fallset-2 .agility-block a > div {
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
	display:block;
	padding:5px;
    border: 8px solid rgba(255, 255, 255, 0.1);
	color:#fff;
	text-overflow: ellipsis;
	background-color:#000;
	background-color:rgba(0,0,0,0.8);
	overflow:hidden;
	opacity:0;
	transition:opacity 0.5s;
}

.fallset-1 .agility-block a > div > span,
.fallset-2 .agility-block a > div > span {
	position:relative;
	top:50%;
	transform:translateY(-50%);
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	display:block;
	text-align:center;
	opacity:0;
	transition:opacity 0.5s;
}

.fallset-1 .agility-block a:hover > div,
.fallset-1 .agility-block a:hover > div > span,
.fallset-2 .agility-block a:hover > div,
.fallset-2 .agility-block a:hover > div > span {
	opacity:1;
}

.fallset-1 .agility-block a > img,
.fallset-2 .agility-block a > img {
	width:100%;
	height:auto;
	display:block;
	transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	transition:transform .5s;
}

.fallset-1 .agility-block a:hover > img,
.fallset-2 .agility-block a:hover > img {
	transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
}

[SamA74]

What browser are yo testing in? I tried your code in Firefox and it seems to work OK.

[everlive]

Firefox

[SamA74]

I copied the code into a Pen to test it. You can look if you see the same problem here too.

[everlive]

Aye it is happening there too in Firefox, I do not know what to make of it.

[SamA74]

@everlive

Aye it is happening there too in Firefox,

That’s strange, it must be something at your end, because in this case we are looking at the very same thing. Is it the latest Firefox? I updated yesterday.
I would say that the transition is not so smooth in Firefox. It’s much smoother in Chrome. But that just looks like a lower frame rate, making it a little jittery. Not actually scaling down at all.

[everlive]

I am using the most up-to-date Firefox V. 45.0.1, it was doing this with the previous version as well. I caught a split second screen of it happening. But like I said, once it does it the first time you hover an image, it clears. If it is only isolated to Firefox then I am not going to freak over it. Just found it odd that this is happening.

[TechnoBear]

I checked @SamA74’s CodePen in Firefox 45.0 on Ubuntu Gnome, and I don’t see any problem with it. (If you have a link to a live page, I’d be happy to check that out for you.)

[PaulOB]

I assume you haven’t disabled browser cache or anything like that?

Make sure you have the original image dimensions in the html image tag. The browser needs these to work out how to resize the image even though you set the image size in css. The css will over-ride the html attributes but will save the browsers from waiting until the image is loaded before it knows how to resize it properly.

Do you have a codepen or a live link of the site shown in that image as it may help to see the actual example rather than building our own examples.

It does seem strange that your image is being scaled smaller so would be good to see the problem in action.

As an aside note that your pre-fixed rules should come before the real rule otherwise you risk the danger of running an old pre-fixed version of the property rather than the correct standard property. This has happened in the past with border-radius so the real property should always be last in sequence.

[everlive]

Looked at everything again like everyone suggested. Rearranged the prefixes added inline width and height to the img tag, and cleared cache and even cookies.

Nothing. The codepen on this thread is pretty much identical to what I have offline. I don’t really have a place online yet to show something. I will save this for a later date once I have web-hosting.

Thanks for the help guys.

[craigl]

Hi everlive. Did you find any solutions to this? I’m experiencing the same problem in the lastest version of Firefox. And I see the flicker in the Pen from SamA74 above.

[SamA74]

Because the results are inconsistent between what different people are seeing with the same code in the same browser, I would conclude that the problem is not with the actual code or the browser, but more likely due to the individual hardware or display setup on peoples computers.

[PaulOB]

@craigl

Hi everlive. Did you find any solutions to this? I’m experiencing the same problem in the lastest version of Firefox. And I see the flicker in the Pen from SamA74 above.

Generally you can fix issues like these by forcing the 3d rendering algorithm by adding a transform rule to the element (and sometimes the parent so don’t give up with testing).

transform: translate3d(0px,0px,0px);

The above does not change anything because the values are zero but does implement the 3d rendering algorithms which often cures jitters in webkit and mozilla.

Sometimes though nothing seems to help because of rounding errors with scale.

It is also important that all images have their width and height attributes in place at their correct aspect ratio (even if you do change the dimensions in your css).

[everlive]

Yeah, it’s still a problem with the previous approach to CSS. I changed the CSS now and apparently fixed it by basically giving the img tag the same behavior as if it was the background-image with background-size:cover; set. It works, I am happy.

[Xairoo]

This bug is a big pain. Happens for me only if the images are out of view while loading. And yeah, latest FF.

Also I’m not able to replace the image with a background because I need it for a masonry grid based on image aspect ratio. Setting width & height didn’t help. transform: translate3d(0px,0px,0px); doesn’t change anything.

Finally transform: translateZ(1px); make it run perfectly in FF.
Works too: transform: translate3d(0px,0px,1px);