chrome vs. firefox diff

Discussion in 'Scripts' started by Manganix, Nov 9, 2012.

to remove all ads.
  1. Manganix

    Manganix Member

    Messages:
    112
    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.
     
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    chrome
    [​IMG]

    firefox
    [​IMG]

    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: Nov 9, 2012
  3. Manganix

    Manganix Member

    Messages:
    112
    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
    [​IMG]

    firefox
    [​IMG]
     
  4. Manganix

    Manganix Member

    Messages:
    112
    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.
     
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    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.

    They don't for me.
     
  6. Manganix

    Manganix Member

    Messages:
    112
    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?

    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.
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    The jumping seems to have to do with the scale transform. I disabled it, and the jumping stopped.
     
  8. Manganix

    Manganix Member

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

    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! :)
     
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Browsers behave differently when running documents on a local file system to how they behave when running documents in a HTTP context.
     
  10. shovenose

    shovenose Banned

    Messages:
    128
    Not trying to be rude but this is not answering any of the OPs questions.
     
  11. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    actually...it does.
     
  12. Manganix

    Manganix Member

    Messages:
    112
    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;
    }
    
     

Share This Page