Bug 91932 – CSS Animation not working properly

• Component: CSS
• Status: RESOLVED FIXED

Created attachment 153675 [details]
An example of what happens with webkit

I'm redoing my site design at the moment and I have a popout subscribe <div> at the side of the page. You can see my draft here: http://freedomrequireswings-portal.blogspot.com/

It works perfectly in Firefox, but in Chrome and Safari it sticks out a bit. It works in Firefox on my PC, but not in Chrome or Safari. It doesn't work on a Mac either.

Here's my HTML:

<div id='Subscribe' style='z-index:10;position:fixed; top:376px; right:-231px; padding-left: 15px;display: inline-block;'>
<table background='http://4.bp.blogspot.com/-gVytZ17cmL0/UAVf1PGc_tI/AAAAAAAABjM/rFNd4dqfwF4/s1600/background.PNG' cellpadding='5' cellspacing='0' id='side' style='border-left: 10px solid #565656; box-shadow: 0px 0px 5px #898989;' width='35px'>
<tbody>
<tr style='box-shadow: 0 1px 4px -3px #5E5E5E;'>
<td>
<font style='font-family:Lobster; color:#1bb4c6;font-size:18px;'>Subscribe</font><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' id='search-form1' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=freedomrequireswings&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px solid #ccc;text-align:left;margin-top:-20px;' target='popupwindow'>
<p>
<table>
<tr>
<td>
<input name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='box-shadow: 2px 2px 2px #121212; font-family:Segoe UI, Yanone Kaffeesatz, trebuchet MS;height:30px;padding-left:5px;padding-right:5px;font-size:16px;color:#636363;' type='text' value='[e-mail]' vinput=''/>
<input name='uri' type='hidden' value='FreedomRequiresWings'/>
<input name='loc' type='hidden' value='en_US'/>
</td>
<td>
<div style='padding-top:3px;'>
<input src='http://1.bp.blogspot.com/-4zEgvyYwgH0/UAnajptLwxI/AAAAAAAABkw/lI_MFSWY1P8/s1600/sub%252B.png' style='height:49px !important; width:49px !important;' type='image'/>
</div>
</td>
</tr>
</table>
</p>
</form>
</td>
</tr>
</tbody>
</table>
</div>

And the CSS:

#Subscribe:hover {
transform: translate(-231px,0);
-ms-transform: translate(-231px,0);
-webkit-transform: translate(-231px,0);
-o-transform: translate(-231px,0);
-moz-transform: translate(-231px,0);
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in; 
-moz-transition: all 0.2s ease-in; 
-o-transition: all 0.2s ease-in; 
-ms-transition: all 0.2s ease-in; 
position:fixed; 
display: inline-block;
}

#Subscribe {
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
display: inline-block;
}

#search-form1 input {
 width: 150px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}
#search-form1 input:focus {
 width: 250px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}

#search-form1 is the form for the email address to be put into. It's called search-form1 because I copied that particular code from a tutorial and I didn't change it. That works perfectly, all the functionalities are working, it's just that the #Subscribe div won't hide properly in Chrome or Safari. Haven't tried it on Opera. When I change the position right property to -233px, it hides properly in Chrome and Safari, but it goes in too far in Firefox.

I was wondering if this is a bug in WebKit? I was told to report it as a bug by people on http://www.stackoverflow.com seeing as they could find no errors in my code.

[Alexey Proskuryakov]

> Here's my HTML:
> And the CSS:

When I save this into a file and open in a browser, it's just a blank page. Could you please attach (not paste!) a test case that shows the difference between Safari and Firefox?

[Pravin D]

Freedom, I think this bug is fixed on the latest webkit builds... or maybe ur site has changed... can you check ?

(In reply to comment #2)
> Freedom, I think this bug is fixed on the latest webkit builds... or maybe ur site has changed... can you check ?

I've changed my site. However, I have found a different bug.

When you hover over the F in the top toolbar it slides up like it's supposed to, but when it comes back down when you move your pointer away, it goes transparent.

I'm only having this problem with webkit. It works perfectly in Firefox.

Here's a link to the site: http://www.freedomrequireswings.com/

Two-thirds of our users use a webkit browser so I'd really appreciate a fix for this.

[Pravin D]

(In reply to comment #3)
> (In reply to comment #2)
> > Freedom, I think this bug is fixed on the latest webkit builds... or maybe ur site has changed... can you check ?
> 
> I've changed my site. However, I have found a different bug.
> 
> When you hover over the F in the top toolbar it slides up like it's supposed to, but when it comes back down when you move your pointer away, it goes transparent.
> 
> I'm only having this problem with webkit. It works perfectly in Firefox.
> 
> Here's a link to the site: http://www.freedomrequireswings.com/
> 
> Two-thirds of our users use a webkit browser so I'd really appreciate a fix for this.

> 

It seems to be a bug... Maybe the next time around u can possibly attach a saved page or reduced test case for the issue. A link to a website not a very good idea as the content might change(as in ur case). Thank you

[Pravin D]

Created attachment 158350 [details]
Reduced TestCase

Hover over the letter "Hover" and move the mouse away. There should be no red color visible. 
The testcase contains also has -moz calls so that the behavior can be compared on webkit and mozilla.

[Simon Fraser (smfr)]

(In reply to comment #5)
> Created an attachment (id=158350) [details]
> Reduced TestCase
> 
> Hover over the letter "Hover" and move the mouse away. There should be no red color visible. 

At any time, or only at the end? In Safari and Firefox, I see a red rectangle when the black box animates up. On unhover, the black animates down, then snaps to get wider, but obscures the red. Do you see something different?

[Pravin D]

(In reply to comment #6)
> (In reply to comment #5)
> > Created an attachment (id=158350) [details] [details]
> > Reduced TestCase
> > 
> > Hover over the letter "Hover" and move the mouse away. There should be no red color visible. 
> 
> At any time, or only at the end? In Safari and Firefox, I see a red rectangle when the black box animates up. On unhover, the black animates down, then snaps to get wider, but obscures the red. Do you see something different?

> 

On Chrome its always repo. after the unHover. 
On Safari 
After the unHover, move the mouse pointer to the right extreme and place it on the  black non-animating region. After a while the black region moves to the left. 

Will attach a screen shot to clarify the bug.

[Pravin D]

Created attachment 158380 [details]
ScreenShots of expected and Bug

[Simon Fraser (smfr)]

I can't reproduce now.