3

So, for my club calendar I'm trying to make a transition play where the td's will get bigger when hovered over. However, when I do, although the text inside gets bigger, the box doesn't really grow. Also, the colored boxes have this strange after-effect where the top and/or bottom portion stays bigger. Here is the fiddle (I'm new to this, so if the link doesn't work, I apologize):

http://jsfiddle.net/glenohumeral13/Lcs68/

And here is, what I think, is the relevant code:

td {
    width: 35px;
    text-align:center;
    font-family: Helvetica, Arial;
    font-size: 16px;
    font-weight: 100;
    transition: transform 1s ease-in;
}
td:hover {
    -ms-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

I'd really appreciate if, if you can fix it, you could also take the time why the solution works because I want to be able to fix this, and related issues, in the future by myself. Thanks! Edit: Thanks everyone for your speedy responses! I tried all the solutions, but the boxes just go white once the transition is over. Could this just be my computer in particular for some reason? Edit: Nevermind: problem solved! Thanks everybody! Last edit: Sorry! I was using Chrome, if it helps anybody now.

Icarus
  • 1,627
  • 7
  • 18
  • 32
  • 1
    In which browser are you seeing these weird effects? It works fine for me in Firefox and IE, and not at all in Chrome. – BoltClock May 15 '14 at 02:00
  • 1
    If the issue you're referring to occurs in Chrome, just add `transition: -webkit-transform 1s ease-in`.. you needed the `-webkit` prefixed version to be transitioned. That seems to be the fix.. http://jsfiddle.net/6CX7r/ – Josh Crozier May 15 '14 at 02:04
  • @Josh Crozier: That reminds me... I've always had difficulty reconciling cross-browser support and vendor prefixes when used with `transition` in conjunction with other transition-properties that employ prefixes. But I did post my findings - Chrome in particular is pretty weird about it: http://stackoverflow.com/questions/22457222/ie10-11-uses-transform-webkit-transform/22457802#22457802 I suspect it doesn't address the problem fully, but then prefixes are always a pain to deal with in the first place. – BoltClock May 15 '14 at 02:14
  • @BoltClock I remember reading/upvoting that answer back when you posted it. Any responses back from that email you sent them? Edit: I see that it's in the link, nevermind. – Josh Crozier May 15 '14 at 02:18
  • 1
    @Josh Crozier: Yep, if you visit the page where the email is linked you'll see navigation links - use "Next in thread" to follow the conversation. – BoltClock May 15 '14 at 02:20
  • You have not yet mentioned which browser you are testing in, so we couldn't know if it's just your browser or your computer. – BoltClock May 15 '14 at 03:03

1 Answers1

-1

LIVE DEMO

Update:

Nowadays for modern browser (>= IE10) you don't need to prefix the property of transform in the transition declaration.

td {
   width: 35px;
   text-align: center;
   font-family: Helvetica, Arial;
   font-size: 16px;
   font-weight: 100;
   transition: /*transform*/ 1s ease-in;
}

(The problem was solve by removing transform so it get the default value all)

... transition: all 1s ease-in; ...

Black Sheep
  • 6,604
  • 7
  • 30
  • 51