Jumping input fields in Safari

问题

I'm trying to recreate a pretty cool placeholder UI using only HTML and CSS, and I've almost got it (demo). However, if you type something in an input field and tab to focus on the next, the one you just entered a value into will be offset a little bit in Safari (6.0.5) and MobileSafari (iOS 6.1). It works fine in Chrome (30).

To reproduce:

Focus on the 'price' input field
Enter a value
Tab to focus the next input field
Watch and amaze while the form eats itself

So the question is: what's causing this and how can I fix it?

Note: I only really care about getting this to work in MobileSafari, anything beyond that is a bonus.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input name="title" type="text" placeholder="Title">
  <input name="price" type="text" placeholder="Price">
  <input name="location" type="text" placeholder="Specific location (optional)">
  <textarea name="desc" rows='4' placeholder="Description"></textarea>
</body>
</html>

CSS

* {
  box-sizing: border-box; 
}

body {
  padding: 0;
  margin: 0;
  font-size: 0;
}

input, textarea {
  position: relative;
  display: inline-block;
  margin: 0;
  outline: none;
  border: 0;
  border-radius: 0;
  padding: 2pt 4pt;
  padding-top: 8pt;
  font-family: "Helvetica Neue";
  font-size: 14pt;
  font-weight: lighter;
}

::-webkit-input-placeholder {
  color: lightgrey;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition-property: top, color;
  -webkit-transition-duration: .1s;
          transition-property: top, color;
          transition-duration: .1s;
}


::-webkit-input-placeholder[style*=hidden] {
  color: rgb(16,124,246);
  font-size: 8pt;
  font-weight: normal;
  top: -8pt;
  opacity: 1;
  visibility: visible !important;
}

[name=title] {
  width: 100%;
  border-bottom: 1px solid lightgrey;
  margin-bottom: 1px;
}

[name=price] {
  width: 30%;
  margin-bottom: 1px;
  border-bottom: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}

[name=location] {
  width: 70%;
  border-bottom: 1px solid lightgrey;
}

[name=desc] {
  width: 100%;
}

回答1:

Adding this to your input and textarea element solves the problem:

float: left;

Tested on Safari Version 6.0.5 (8536.30.1) and Mobile Safari

回答2:

I responded to you on Twitter, but I'll also post a link here: This can be done with input + label as opposed to input + placeholder. http://codepen.io/jordanoaragao/pen/teqFw

It's been implemented here: http://womensenterprisecenter.com/

回答3:

It seems that the placeholder-attribute cannot be animated. So I made a little fake-placeholder and animated this. Unfortunately, if you only use CSS, the animation will go off, if you leave the input. So I added a little bit of JS-magic to trigger the animation.

来源：https://stackoverflow.com/questions/19325319/jumping-input-fields-in-safari

标签

html

css

mobile-safari