chrome vs. firefox diff

Manganix

Member
Hi,

I encountered the following issue:
in Chrome, the images aren't perfectly centered and when hovered over them, they all seem to be jumping just a little bit to the right, to get centered perfectly.

in Firefox all seem to be working just fine; the images are perfectly centered in their boxes. When hovered, all stays perfectly in place (as it should be).

You can check what I'm trying to describe on

http://www.gamanga.com/VideoGames.html

Is it in the HTML or in the CSS code? What am I overlooking? Can't find is going wrong.

Help! Anyone?

Thanks already.
 

Phreaddee

Super Moderator
Staff member
chrome
chrome.png


firefox
firefox.png


no, cant see any discernible differences...the chrome screenshot the thumbs appears slightly to the left (only slightly and not enough for a visitor to ever notice, except if of course they opened the website in both firefox and chrome and took a screenshot of both...)
although id be more concerned about how the header was rendering differently in both...
 
Last edited:

Manganix

Member
indeed, the thumbs in chrome appear slightly (very little) on the left, but when you hover over them (in chrome), they all jump (a very little bit to the right) to appear perfectly centered. Surely you must have noticed (this jump)?

This identical problem occures on every page containing image thumbs in Chrome ..? Where to look... in order to get the thumbs back perfectly centered again?

This wasn't the case untill yesterday ... don't know what I did, but I must have screwed someting in the code (HTML?CSS?) ... problem is I did overwrite the code, can't go back.

I'm guessing I must have forgot or misplaced a comma or something somewhere ... but can't see it.


Header:
never noticed the rendering was that different? Seems worse in your shots?

chrome
chromep.jpg


firefox
firefoxax.jpg
 

Manganix

Member
could anyone help me out with this problem?

Why on earth are the thumbs in Chrome slightly more to the left (compared to Firefox) and the all make a quick tiny jump to the right (in order to get perfectly centered for a sec) and back ...?

http://www.gamanga.com/VideoGames.html

Tried lots of things, but can't get the Chrome fixed?

Thanks for your tips and feedback.
 

chrishirst

Well-Known Member
Staff member
Why on earth are the thumbs in Chrome slightly more to the left (compared to Firefox)
Why does that matter????? There ARE going to be small differences between browsers, YOU are the only person who is EVER going to know or care about that.

The "If it ain't broke, don't try fixing it" maxim applies.

and the all make a quick tiny jump to the right (in order to get perfectly centered for a sec) and back ...?
They don't for me.
 

Manganix

Member
Why does that matter????? They don't for me.

I'm also trying to learn a few things here and what could cause what differences/problems.

I understand that there could be some differences between different browsers. But how come I see in chrome the jumps and you don't.
Shouldn't chrome be the same everywhere on every computer?

There ARE going to be small differences between browsers
OK, but this particular difference wasn't there .. the pages where identical in chrome+firefox

Beside that, when I test/preview the webpage in Dreamweaver (in chrome), I also don't see that alignment+jumping problem. The problem only occurs on the internet (live).

Just wanna understand things.
 

ronaldroe

Super Moderator
Staff member
The jumping seems to have to do with the scale transform. I disabled it, and the jumping stopped.
 

Manganix

Member
Finally! I'm getting somewhere! Someone else also noticed, nothing wrong with my eyes AND I'm not seeing things that aren't there :)

The jumping seems to have to do with the scale transform. I disabled it, and the jumping stopped.

You're right, when scaling is disabled, the jumping stops.
What I don't understand is how something (coding) wasn't causing any issues, now suddenly is?

This is the code that is causing the jumps in Chrome (but only when I upload it to the net. In the Chrome/Dreamweaver preview it works perfect.
Code:
.zoomimg{
	width:900px;
	height: auto;
	margin-top:5px;
	padding:10px;
}
.quadrado {
   width: 280px;
   height: 200px;
   margin: 0px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   margin:8px 8px 8px 8px;
   border:#999999 solid 2px;
}
.quadrado img {
   display: block;
   position: relative;
}
.imgzoom img.teste {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.imgzoom:hover img.teste {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   cursor:pointer;
}

And this is how the jumping stops (scaling disabled):
Code:
.zoomimg{
	width:900px;
	height: auto;
	margin-top:5px;
	padding:10px;
}
.quadrado {
   width: 280px;
   height: 200px;
   margin: 0px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   margin:8px 8px 8px 8px;
   border:#999999 solid 2px;
}
.quadrado img {
   display: block;
   position: relative;
}
.imgzoom img.teste {
  /*-webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);*/
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.imgzoom:hover img.teste {
  /* -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);*/
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   cursor:pointer;
}

Anyone an idea how I can keep the scaling and also get rid of the jumping in chrome? Thanks! :)
 

chrishirst

Well-Known Member
Staff member
Browsers behave differently when running documents on a local file system to how they behave when running documents in a HTTP context.
 

Phreaddee

Super Moderator
Staff member
actually...it does.
Beside that, when I test/preview the webpage in Dreamweaver (in chrome), I also don't see that alignment+jumping problem. The problem only occurs on the internet (live).

Just wanna understand things.
 

Manganix

Member
Code:
Anyone an idea how I can keep the scaling and also get rid of the jumping in chrome?

I think I found a way:

the jumping of the thumbs seems to stop and they're centered as they should be (in chrome) when I keep the scaling ONLY on the hovering part:

NOT WORKING
Code:
.screenShots_btns img.teste_artW {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.screenShots_btns:hover img.teste_artW {
	-webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   cursor:pointer;
}


WORKING OK
Code:
.screenShots_btns img.teste_artW {
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.screenShots_btns:hover img.teste_artW {
	-webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   cursor:pointer;
}
 
Top