探究position:fixed在css动画过程中的行为~

补充: 是指transform动画

想要的效果

原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, 然后结果显示那里做相同高度的padding的 , 所以还原问题配置

但是动画效果是这样的

有兴趣可以到这里改css试试

那么问题来了

所以动画过程中的position:fixed失效了 ? 是不是回归到文档流?

这时候使用Animations工具了 , Chrome Devtools位置:3 dot -> more tools -> Animations , 设置比较慢的速度

动画的时候按下暂停按钮~鼠标的位置~

然后就是调整设置~~

建议去实地试试~调调各种布局属性

可以从表现上看到

  1. 修改bottom的位置是无效的 , 同时修改margin-top也是无效的
  2. 只有增加bottom/top的属性才会出现这样的 , 后面试了left/right正常 , 并且配合margin也是正常的 , 调节其值也是有效果的
  3. bottom修改为top的表现 , 可以看出这时候的布局是参照所参与transform变换的元素
  4. 还有postion:fixed会导致一丢丢的垂直位置偏移

这就奇了怪了, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的~~

那么说好的探究捏? 看来是需要真的了解fixed的布局的实现机制了~ 允许我先Google Google~

找到了这篇~CSS3 transform对普通元素的N多渲染影响

还有这篇transform你不知道的那些事

剩下的读者继续谷歌吧~ 我谷歌了一下原来问题2015的时候就被发现了~我就当作提供一个debug思路吧~ 利用Animations , 摸索差不多再更新个小结~[faceplam]逃~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无所事事者爱嘲笑

经常遇到的浏览器的兼容性有哪些?

1505
来自专栏Java帮帮-微信公众号-技术文章全总结

Web前端工程师2016必学的四大核心技能

1.HTML5(结构层) HTML超文本标记语言是结构层,是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。它是学习前端开发的基础语言,要重点学习H5...

2803
来自专栏QQ音乐技术团队的专栏

iOS 视图,动画渲染机制探究

终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,...

3689
来自专栏逍遥剑客的游戏开发

Flash在DirectX中的绘制

1623
来自专栏Coco的专栏

使用 position:sticky 实现粘性布局

2234
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

1323
来自专栏黄Java的地盘

动态生成DOM元素的高度及行数获取与计算方法

在开发IM的项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度的DOM元素都是动态生成的,我们无法在数据渲染前获取...

1452
来自专栏python3

html初识

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

1733
来自专栏GreenLeaves

web前端优化之reflow(减少页面的回流)

1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom...

2267
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(一)

一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用...

3195

扫码关注云+社区