input在点击的时候会出现位移

Question

看如下图片，在点击时会出现名字往下偏移？主要是哪个css引起呢？
代码也不复杂。是高度不够？但是我看他在开发模式下，他本来的框框已经往下位移了一点点。点击又恢复正常。求高手赐教

 <div class="selector-body">
                        <div class="specs">
                            <div class="specs-key">收货地址</div>
                            <div class="m-address-receiver">
                                <input class="m-addr-name" placeholder="名字" />
                                <input class="m-addr-mobile" placeholder="收货电话" />
                            </div>
                            <div class="m-addr-region">
                                <div class="m-addr-province"><select class="m-addr-select"><option value="0">选择省份</option></select></div>
                                <div class="m-addr-city"><select class="m-addr-select"><option value="0">选择城市</option></select></div>
                                <div class="m-addr-district"><select class="m-addr-select"><option value="0">选择地区</option></select></div>
                            </div>
                            <div class="m-addr-address">
                                <input id="address" placeholder="请填写详细街道地址" type="text">
                            </div>
                        </div>
                    </div>

Answer 1

很显然，问题出在css上，但是你又没有提供CSS文件。 猜测应该是Css中有定义元素获取焦点后的样式，类似下面的代码。 如果真是这样，找到后，去掉这些样式后你再看，应该就没有问题了。

经过反馈，问题不是:forcus属性导致，是动画问题。 我把作者提供的样式贴在我的回答中

 -webkit-transition: bottom 150ms ease-in-out 150ms;
         transition: bottom 150ms ease-in-out 150ms;
  -webkit-transform: translateZ(0);

待作者补充html结构和相应css 以后我再进一步追踪问题。

Answer 2

@deepgoing 没有Focus，但是我发现一个问题，我这个是一个浮动层，他切换的时候是有效果。如果我把效果去掉，就不会出现以上抖动。
是浏览器问题吗？

    -webkit-transition: bottom 150ms ease-in-out 150ms;
    transition: bottom 150ms ease-in-out 150ms;
    -webkit-transform: translateZ(0);