关于谷歌webkit核心css3 translate3d渲染的问题
今天给客户做的例子中发现的一个问题,谷歌浏览器目前最新版本 41.0.2272.89 m 里表现出来的,其他版本没测试,当执行后,内容会停留在原处,缩放一下窗口就变好了,代码是没有问题的,不用3D也没问题,那么肯定就是GPU渲染问题,最后找到了解决办法,在要执行的元素上加入transform:translate3d(0,0,0); 这样让页面载入时就启用GPU,完美解决。
Loading
今天给客户做的例子中发现的一个问题,谷歌浏览器目前最新版本 41.0.2272.89 m 里表现出来的,其他版本没测试,当执行后,内容会停留在原处,缩放一下窗口就变好了,代码是没有问题的,不用3D也没问题,那么肯定就是GPU渲染问题,最后找到了解决办法,在要执行的元素上加入transform:translate3d(0,0,0); 这样让页面载入时就启用GPU,完美解决。
代码结构如下:
<details open> <summary>展开/收缩</summary> 这里是展开的内容 </details>
open表示默认展开
它允许我们在点击summary标签时显示和隐藏details里的其他内容。
不能嵌套使用。
summary标签会自动有个箭头,当你点击它时,下面的附加信息将会呈现,再次点击则隐藏。
FAQ页面中经常使用这个功能。