[Webkit-unassigned] [Bug 91932] New: <div> with CSS properties won't position properly in Chrome or Safari on a PC or a Mac, but works perfectly in Firefox

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=91932

           Summary: <div> with CSS properties won't position properly in
                    Chrome or Safari on a PC or a Mac, but works perfectly
                    in Firefox
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
               URL: http://www.freedomrequireswings.com/
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P5
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: freedomrequireswings at gmail.com


Created an attachment (id=153675)
 --> (https://bugs.webkit.org/attachment.cgi?id=153675&action=review)
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', '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 at 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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.