gpt4 book ai didi

iOS9 UIWebView/Chrome CSS 过渡

转载 作者:太空宇宙 更新时间:2023-11-04 02:51:37 24 4
gpt4 key购买 nike

在致力于使我们的网站具有响应性的同时,我按照以下方式实现了一个菜单系统 - http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

在我们将测试 iPhone 6 从 iOS 8 更新到 iOS 9 之前,一切都进行得很顺利。Safari 继续正常工作,但 Chrome 和我们使用 UIWebView 的应用程序不会呈现幻灯片过渡,除非我手动进入使用 Safari 网络检查器切换某些东西。

我已经尝试了来自Safari on iOS 9 does not trigger click event on hidden input file的建议, 但没有效果。

我也知道 javascript 位置/哈希错误,但不确定这是否相关。

有没有人遇到过这样的事情,并找到了解决方法或修复方法?目前无法更新到 Safari Web View。

最佳答案

已找到解决方案。事实证明,从 9.0.2 开始,iOS 9 UIWebView 已经破坏了 ~(波浪号)选择器。

为了解决这个问题,我的代码必须不那么通用,并使用 CSS +(加号)选择器来获得我需要做的事情才能工作的选择器。

这是我所用菜单的非常基本的表示。

<input type="checkbox" class="nav-trigger" id="nav-trigger" />
<nav class="MobileMenu" />
<div class="Content">
<label for="nav-trigger"/>
</div>

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>

更改了 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);
}

关于iOS9 UIWebView/Chrome CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32894193/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com