[英]iOS9 UIWebView/Chrome CSS transitions
While working on making our website responsive, I implemented a menu system along the lines of this - http://www.sitepoint.com/pure-css-off-screen-navigation-menu/ 在使我们的网站具有响应能力的同时,我按照以下步骤实施了菜单系统-http: //www.sitepoint.com/pure-css-off-screen-navigation-menu/
Everything was going swimmingly until we updated our test iPhone 6 from iOS 8 to iOS 9. Safari continues to work properly, but Chrome and our app which uses a UIWebView, will not render the slide transition, unless I go in and manually toggle something using the Safari web inspector. 在我们将测试的iPhone 6从iOS 8更新到iOS 9之前,一切都进行得很顺利。Safari继续正常运行,但是Chrome和使用UIWebView的应用程序不会呈现幻灯片过渡,除非我进入并使用手动切换某些内容Safari Web检查器。
I have tried the suggestions from Safari on iOS 9 does not trigger click event on hidden input file , but it had no effect. 我尝试了来自iOS 9上Safari的建议, 不会在隐藏的输入文件上触发click事件 ,但它没有任何效果。
I also know about the javascript location/hash bug, but am not sure if that is something that is related. 我也了解javascript的位置/哈希错误,但不确定是否与之相关。
Has anyone encountered something like this, and found a way around it or a way to fix it? 有没有人遇到过这样的事情,找到了解决方法或解决方法? Updating to Safari Web View is currently not an option.
当前无法更新到Safari Web View。
A solution has been found. 找到了解决方案。 It turns out that iOS 9 UIWebView, as of 9.0.2, has broken the ~ (tilde) selector.
事实证明,从9.0.2版开始,iOS 9 UIWebView破坏了〜(波浪号)选择器。
In order to get around this, I had to be a lot less general with my code, and use the CSS + (plus) selector to get the selectors that I need doing stuff to work. 为了解决这个问题,我对代码的通用性要低得多,并使用CSS +(加号)选择器来获取我需要做的工作才能使用的选择器。
This is a very basic representation of what I have working as my menu. 这是我作为菜单工作的非常基本的表示。
<input type="checkbox" class="nav-trigger" id="nav-trigger" />
<nav class="MobileMenu" />
<div class="Content">
<label for="nav-trigger"/>
</div>
the styles controlling it before iOS9 在iOS9之前控制它的样式
<style>
.Content
{
width: 100%;
height: 100%; /*background-color: #fff;*/
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
nav.MobileMenu
{
list-style: none;
width: 60%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
nav.MobileMenu
{
display: none;
overflow-y: scroll;
}
label[for="nav-trigger"]
{
position: absolute;
margin: 7px 0 0 10px;
width: 30px;
height: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger:checked ~ nav.MobileMenu
{
display: block;
}
.nav-trigger:checked ~ div.NotMenu
{
-webkit-transform: translate(60%,0);
-moz-transform: translate(60%,0);
-ms-transform: translate(60%,0);
-o-transform: translate(60%,0); /*transform: translate(60%,0);*/
transform: translate(60%,0); /*left: 60%;*/
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-triggerLink:checked ~ ul.level0
{
visibility: hidden;
}
.NotMenu
{
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
</style>
changed css 改变CSS
.nav-trigger:checked + nav.MobileMenu
{
display: block;
}
.nav-trigger:checked + nav.MobileMenu + div.Content
{
-webkit-transform: translate(60%,0);
-moz-transform: translate(60%,0);
-ms-transform: translate(60%,0);
-o-transform: translate(60%,0); /*transform: translate(60%,0);*/
transform: translate(60%,0); /*left: 60%;*/
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.