Safari "Submit" button disappears when you hover over a resize screen

Question

I have a contact form split between two columns. Everything works fine on Firefox and Chrome, however in Safari, when my columns stack together with a smaller screen size or on the mobile, the submit button disappears when you hover.

Here fiddle

My HTML and CSS:

@CHARSET "ISO-8859-1"; /* Reset CSS * --------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } a{ text-decoration:none; font-size: 0.6em; } table { border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } strong{ font-weight: bold; } ol,ul { list-style: none; margin:0; padding:0; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; margin:0; padding:0; color:#444; } q:before,q:after { content:''; } abbr,acronym { border: 0; } /* Custom CSS * --------------------------------------- */ body{ font-family: Roboto, arial, helvetica, sans-serif; color: #F2F2F2; } .wrap{ margin-left: auto; margin-right: auto; width: 960px; position: relative; } h1{ font-size: 4em; font-weight: 900; } h1#h1ssl{ font-size: 3.2em; font-weight: 900; } h2#h2a1{ font-family: Abril Fatface; font-size: 4em; font-weight: 900; color: #840000; } h2#h2a2{ font-family: Abril Fatface; font-size: 2em; font-weight: 900; color: #840000; } h2#h2b1{ font-size: 2em; font-weight: 900; color: #00cccc; letter-spacing: 1px; padding-bottom: 8px; } p{ font-size: 2em; } p#p1c2a{ font-size: 1em; color: #efefef; } } .intro p{ width: 50%; margin: 0 auto; font-size: 1.5em; } div#adhoc { padding-top: 5%; padding-left: 10%; padding-right: 10%; padding-bottom: 5%; } /*========== Contact Form ===========*/ label { display:block; letter-spacing:2px; } input, textarea { font-family: Roboto, arial, helvetica, sans-serif; width:439px; height:22px; background:#efefef; border:1px solid #dedede; padding:10px; margin-top:3px; font-size:0.9em; color:#3a3a3a; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .select-field { font-family: Roboto, arial, helvetica, sans-serif; padding: 5px 8px; width:459px; font-size:0.9em; margin-top:3px; border: none; box-shadow: none; background:#efefef; background-image: none; -webkit-appearance: none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .select-field:focus { outline: none; } textarea { resize: none; } .form-style .input-field:focus, .form-style:focus, .form-style .textarea-field:focus, .form-style .select-field:focus{ border: 1px solid #999999; } .form-style input[type="button"], .form-style input[type="submit"] { width:127px; height:38px; background-color: #00cccc; color: #efefef; font-weight: 600; letter-spacing:2px; border:none; margin-top:20px; cursor:pointer; } .form-style input[type="button"]:hover, .form-style input[type="submit"]:hover { opacity:.9; } .form-style .success{ background: #444; padding: 5px 10px 5px 10px; margin-top: 10%; margin-bottom: 10%; border: none; font-size: 3em; font-weight: 900; color: #00cccc; } .form-style .error { background: #444; padding: 5px 10px 5px 10px; margin-top: 10%; margin-bottom: 40px; border: none; font-size: 3em; font-weight: 900; color: #ff6600; } /*========== Columns ===========*/ div.col-2a { text-align: left; padding-left: 4%; padding-right: 4%; } div.col-2b { -webkit-column-count: 2; -webkit-column-width: 440px; -webkit-column-gap: 40px; padding-top: 20px; padding-bottom: 5%; text-align: left; /* Chrome, Safari, Opera */ -moz-column-count: 2; -moz-column-width: 440px; -moz-column-gap: 40px; padding-top: 20px; padding-bottom: 5%; text-align: left; /* Firefox */ column-count: 2; column-width: 440px; column-gap:40px; padding-top: 20px; padding-bottom: 5%; text-align: left; } /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { h1{ font-size: 1em; } h1#h1ssl{ font-size: 1.8em; } h2#h2a1{ font-size: 1.1em; } h2#h2a2{ font-size: 1em; } p{ font-size: 1em; } p#p1e{ font-size: 1.5em; } p#p1c2a{ font-size: 1em; } a{ font-size: 1em; } input, textarea { width:260px; } .select-field { width:280px; } /* Extra Small Devices, Phones */ @media only screen and (min-width : 440px) { h1{ font-size: 1.25em; } h1#h1ssl{ font-size: 3.2em; } h2#h2a1{ font-size: 1.5em; } h2#h2a2{ font-size: 1em; } p{ font-size: 1em; } p#1e{ font-size: 1.5em; } p#p1c2a{ font-size: 1em; } a{ font-size: 1em; } input, textarea { width:439px; } .select-field { width:459px; } } @media only screen and (min-width : 600px) { h1{ font-size: 2em; } h1#h1ssl{ font-size: 3.2em; } h2#h2a1{ font-size: 2em; } h2#h2a2{ font-size: 2em; } p{ font-size: 1em; } p#p1c2a{ font-size: 1em; } a{ font-size: 0.9em; } } @media only screen and (min-width : 740px) { h1{ font-size: 2.5em; } h2#h2a1{ font-size: 2.5em; } h2#h2a2{ font-size: 2em; } p{ font-size: 1.25em; } p#p1c2a{ font-size: 1.25em; } a{ font-size: 0.8em; } } /* Small Devices, Tablets */ @media only screen and (min-width : 900px) { h1{ font-size: 3em; } h2#h2a1{ font-size: 3em; } h2#h2a2{ font-size: 2em; } p{ font-size: 1.5em; } p#p1c2a{ font-size: 1em; } a{ font-size: 0.8em; } div.col-2a { -webkit-column-count: 2; -webkit-column-width: 440px; -webkit-column-gap: 40px; -webkit-text-align: left; -webkit-padding-left: 4%; -webkit-padding-right: 4%; /* Chrome, Safari, Opera */ -moz-column-count: 2; -moz-column-width: 440px; -moz-column-gap: 40px; -moz-text-align: left; -moz-padding-left: 4%; -moz-padding-right: 4%; /* Firefox */ column-count: 2; column-width: 440px; column-gap:40px; text-align: left; padding-left: 4%; padding-right: 4%; } } /* Medium Devices, Desktops */ @media only screen and (min-width : 1040px) { h1{ font-size: 3.5em; } h2#h2a1{ font-size: 3.5em; } h2#h2a2{ font-size: 2em; } p{ font-size: 1.75em; } p#p1c2a{ font-size: 1em; } a{ font-size: 0.6em; } div.col-2a { -webkit-column-count: 2; -webkit-column-width: 440px; -webkit-column-gap: 40px; -webkit-text-align: left; -webkit-padding-left: 4%; -webkit-padding-right: 4%; /* Chrome, Safari, Opera */ -moz-column-count: 2; -moz-column-width: 440px; -moz-column-gap: 40px; -moz-text-align: left; -moz-padding-left: 4%; -moz-padding-right: 4%; /* Firefox */ column-count: 2; column-width: 440px; column-gap:40px; text-align: left; padding-left: 4%; padding-right: 4%; } } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { h1{ font-size: 4em; } h2#h2a1{ font-size: 4em; } h2#h2a2{ font-size: 2em; } p{ font-size: 2em; } p#p1c2a{ font-size: 1em; } a{ font-size: 0.6em; } div.col-2a { -webkit-column-count: 2; -webkit-column-width: 440px; -webkit-column-gap: 40px; -webkit-text-align: left; -webkit-padding-left: 4%; -webkit-padding-right: 4%; /* Chrome, Safari, Opera */ -moz-column-count: 2; -moz-column-width: 440px; -moz-column-gap: 40px; -moz-text-align: left; -moz-padding-left: 4%; -moz-padding-right: 4%; /* Firefox */ column-count: 2; column-width: 440px; column-gap:40px; text-align: left; padding-left: 4%; padding-right: 4%; } } 

 <div class="form-style" id="contact_form"> <div id="contact_results"></div> <div class="col-2b" id="contact_body"> <label><span>Name <span class="required">*</span></span></label> <input type="text" name="name" id="name" required="true" class="input-field"/> <label style="margin-top:20px;"><span>Email <span class="required">*</span></span> </label> <input type="email" name="email" required="true" class="input-field"/> <label style="margin-top:20px;"><span>Current Website</span></label> <input style="margin-bottom:20px;" type="text" name="website" required="false" class="input-field"/><br> <div style="display:inline-block;"><label for="subject"><span>I Want To</span></label> <select name="subject" class="select-field" placeholder="Choose something"> <option value="Holder">Choose One...</option> <option value="New Site">Start fresh</option> <option value="Site Update">Add some lipstick</option> <option value="Other Design">Do something else</option> <option value="Saying Hi!">Just say Hi!</option> </select> <label for="field5" style="margin-top:20px;"><span>Tell Us More:<span class="required">*</span></span></label> <textarea name="message" id="message" class="textarea-field" required="true" placeholder="Share your dreams or say hello!" style="height: 108px;"></textarea> <label> <span></span><input type="submit" id="submit_btn" value="Submit" /> </label></div> </div> </div> 

Answer 1

If someone else encounters this problem, then the solution that worked for me, instead of setting the opacity to control the effect of the button hover, I used the rgba background value on the button and everything works fine