Question

0 0

Typecho 后台部分表单按钮在 Chrome 下出现灵异动画问题，求解决

我给按钮添加了 compass 的 transition-duration(.4s) 的动画，用于控制按钮背景色。
但是加了以后 登录页面 和【控制台-个人设置】页面的按钮却出现了从小变大的效果， 但是在【设置-（下面所有页面）】下所有的按钮都没有出现大小变化的情况 。

于是我又加了句 transition-property(background-color) ，按钮的形状没有变化了，但是出现了从无到有的渐变过程，这个就不明白了，js 全禁用了也是这样，查了半天也没查出原因。

safari 和 firefox 下都显示正常，只有在 hover 过程才出现背景色渐变的动画。
但是在 Chrome 浏览器里出现了形状变化或展示之初变化（我的版本 31.0.1650.57），不知道是什么问题，应该如何解决？

演示后台 http://typecho.org/admin/login.php

chrome css3 typecho

12 years, 4 months ago

jesten

share

jesten 12 years, 4 months ago

Answer 1

0

研究半天，终于在网上找到了一个可行的解决办法
http://css-tricks.com/transitions-only-after-page-load/

解决步骤(在指定文件里修改或添加代码)：

admin/header.php


 <body class="preload<?php if (isset($bodyClass)) {echo ' '.$bodyClass;} ?>">

admin/css/style.css


 /*可以放在 body {} 下面*/
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

admin/common-js.php


 $(document).ready(function() {
  $("body").removeClass("preload");
});

已经发现在如下情况下会出现问题：

button 处在一个 form 中，并且 form 里至少有一个 input[type=password]
设置 button 样式的 css 代码是通过 link 元素外链进来的，若是通过 style 元素直接把 css 代码写到页面内，问题消失
如果 css 代码前有一大段外链的 javascript 代码（例如一个 jquery.js），且没有被缓存，也有可能使问题消失

最小化的会出问题的代码：
index.html


 <!doctype html>
<link rel="stylesheet" href="index.css"/>
<form>
  <input type="password"/>
  <button>登录</button>
</form>

index.css


 button {
  background-color: blue;
  -webkit-transition: background-color 0.5s;
}
button:hover {
  background-color: orange;
}

P.S. 这个应该算是 Chrome 的 bug 吧

answered 12 years, 4 months ago

裏·琪露諾