WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
91932
CSS Animation not working properly
https://bugs.webkit.org/show_bug.cgi?id=91932
Summary
CSS Animation not working properly
freedomrequireswings
Reported
2012-07-21 13:23:52 PDT
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('
http://feedburner.google.com/fb/a/mailverify?uri=freedomrequireswings&apos
;, 'popupwindow', 'scrollbars=yes,width=550,height=520');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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' 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='
email@example.com
' 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.
Attachments
An example of what happens with webkit
(19.65 KB, image/png)
2012-07-21 13:23 PDT
,
freedomrequireswings
no flags
Details
Reduced TestCase
(2.08 KB, text/html)
2012-08-14 09:44 PDT
,
Pravin D
no flags
Details
ScreenShots of expected and Bug
(86.19 KB, application/x-zip-compressed)
2012-08-14 11:28 PDT
,
Pravin D
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1
2012-07-23 09:33:15 PDT
> 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
Comment 2
2012-08-14 00:38:08 PDT
Freedom, I think this bug is fixed on the latest webkit builds... or maybe ur site has changed... can you check ?
freedomrequireswings
Comment 3
2012-08-14 03:26:39 PDT
(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
Comment 4
2012-08-14 08:44:38 PDT
(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
Comment 5
2012-08-14 09:44:21 PDT
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)
Comment 6
2012-08-14 10:32:12 PDT
(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
Comment 7
2012-08-14 11:20:29 PDT
(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
Comment 8
2012-08-14 11:28:02 PDT
Created
attachment 158380
[details]
ScreenShots of expected and Bug
Simon Fraser (smfr)
Comment 9
2019-03-23 10:35:47 PDT
I can't reproduce now.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug