我目前正在使用html5和jQuery for iPad Safari开发一个Web应用程序.我遇到了一个问题,当我向下滚动它们时,大的滚动区域会导致屏幕外的元素在延迟后出现.
我的意思是,如果我有一行图像(或者甚至是带有渐变的div)在屏幕外,当我向下(或向上)向下滚动时,预期的行为是元素在屏幕上显示为我正在滚动它.
然而,我所看到的是,直到我将手指从屏幕上抬起并且滚动条完成其所有动画时才会出现该元素.
这对我来说是一个非常明显的问题,使整个事情看起来不稳定,尽管事实并非如此.我猜测iPad Safari正在尝试做一些事情以节省内存.有什么办法可以防止这种不稳定的发生.此外,如果有人能够了解iPad Safari实际上正在尝试做什么,我也将不胜感激.
在过去的几个小时里,我一直在努力弄清楚一个子元素如何定位于它的父元素而不是屏幕端口,即使它被定位为"固定".非常幸运的是,我偶然发现提到-webkit-transform: translate3d(0, 0, 0)父母可能会让事情变得糟糕.我正在使用bootstrap框架,因此他们确实将此属性放在.navbar-fixed-top父元素之一的类上.一旦我将其移除,孩子就开始重新定位视口.所以我有两个问题:
-webkit-transform: translate3d(0, 0, 0)要做这些讨厌的事情?.navbar-fixed-top课堂上?更新
好吧,似乎我找到了第二个问题的答案.这是提交消息:
应用translate3d到modal,navbar-fixed和affix来对抗浏览器重绘
以下是第二个问题的答案:
对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.
已在语义ui的文档和问题页面中进行Google搜索,并在stackoverflow中进行了搜索。找不到答案。
在Semantic-ui-react中,如何制作内容固定在屏幕上的边栏?我目前所拥有的是:
<Sidebar.Pushable as={Segment}>
<Sidebar
id="sidebar"
as={Menu}
animation="overlay"
direction="right"
visible={this.state.visible}
vertical
inverted
>
{this.getMenuItems()}
</Sidebar>
<Sidebar.Pusher>
<Route path="/" component={Filler} />
</Sidebar.Pusher>
</Sidebar.Pushable>
Run Code Online (Sandbox Code Playgroud)
语义ui反应文档中似乎没有任何单词,并将Sidebar.Pushable,Sidebar或任何Menu Items位置设置为:fixed; 似乎也不起作用。