Input & Textarea Border not showing on Safari

Question

The border of my form is showing up great on all browsers except for Safari. Some times they don't show up at all and sometimes one edge is missing. Any help would be awesome. You can go here to look at it http://cmweb.design

Here's the html

    <section id="contact">

    <article>

      <h2 class="title1">Start Your Project</h2>
      <p>Reach out to see if we are the right fit for your project. We'd love to help see a vision come to reality.</p>

      <form method="POST" action="mail.php">
        <aside id="inputs">
          <input type="text" name="firstname" value="First Name" required><br>
          <input type="text" name="lastname" value="Last Name" required><br>
          <input type="email" name="email" value="Email" required><br>
        </aside>
        <textarea name="comments">Enter message here...</textarea>
        <button type="submit" value="Send">Submit</button>
      </form>

    </article>
    </section>

Here's the css:

*--- Contact ---*/

#contact{
  background-color: #181818;
  display: table;
  text-align: center;
  width: 100%;
}

#contact article{
  display: table-cell;
  padding: 100px;
  vertical-align: middle;
}

#contact h2{
  color: white;
  padding-bottom: 20px;
}

#contact p{
  font-size: 14px;
  margin: 0 auto;
  padding-bottom: 40px;
  width: 50%;
}

form{
  font-family: 'Raleway', sans-serif;
  -webkit-appearance: none;
}

#inputs{
  display: inline-block;
}

input{
  background-color: #181818;
  border-color: #cfcfcf;
  border-width: 0px 0px .5px 0px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-style: solid;
  color: #cfcfcf;;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  height: 25px;
  margin-right: 20px;
  margin-top: 21px;
  text-transform: uppercase;
  -webkit-appearance: none;
  width: 240px;
}

textarea{
  background-color: #181818;
  border-color: #cfcfcf;
  border-width: .5px;
  border-style: solid;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  color: #cfcfcf;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  height: 120px;
  line-height: 25px;
  min-width: 305px;
  margin-top: 20px;
  padding: 5px 10px;
  text-transform: uppercase;
  width: 10%;
  -webkit-appearance: none;
  vertical-align: top;
}

button{
  background: none;
  border: .5px solid #cfcfcf;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  color: white;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin-left: 20px;
  margin-top: 20px;
  padding: 50px 40px;
  position: relative;
  text-transform: uppercase;
  vertical-align: top;
}

button::after{
  border-top: 70px solid rgba(101,70,84,0.5);
  content: "";
  top: 25px; right: 0;left: 0;
  position: absolute;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

button:hover::after{
  border-top: 70px solid rgba(227,228,217,0.5);
  content: "";
  top: 25px; right: 0; left: 0;
  position: absolute;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:07

Change border width 0.5 to 1

there is no such unit as half a pixel :)

the minimum is 1px, obviously some browsers are rounding it up to 1, and others are rounding down to 0px.

HTML: Sub-pixel border.

input{
  background-color: #181818;
  border-color: #cfcfcf;
  border-width: 0px 0px 1px 0px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-style: solid;
  color: #cfcfcf;;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  height: 25px;
  margin-right: 20px;
  margin-top: 21px;
  text-transform: uppercase;
  -webkit-appearance: none;
  width: 240px;
}

textarea{
  background-color: #181818;
  border-color: #cfcfcf;
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  color: #cfcfcf;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  height: 120px;
  line-height: 25px;
  min-width: 305px;
  margin-top: 20px;
  padding: 5px 10px;
  text-transform: uppercase;
  width: 10%;
  -webkit-appearance: none;
  vertical-align: top;
}

Input & Textarea Border not showing on Safari

1 Answers1