个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
您好，提前感谢您的宝贵时间。
我在 safari 中创建了一个可重现的错误，我听说这很常见，并且我尝试了 Safari 的黑客来修复它，但遗憾的是没有运气。
问题很简单:
我有一个 float 卡片，其初始位置固定在内容的底部，它有 click事件监听器，它所做的只是切换 position卡的过渡。
另一方面，我有 container它将卡片包裹在一个位置固定的元素中，当卡片的位置为 transitioned 时会修改变成static .
我把 article固定，以便卡片可以使用页面的主滚动而不具有另一个滚动上下文。
以下是手机预览链接:
https://qiisu.csb.app/
这是带有代码的代码沙箱:
https://codesandbox.io/s/quirky-surf-qiisu?file=/index.html
如果您想在这里看到它，还有片段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#content {
width: 100%;
display: block;
background-color: rgb(255, 255, 255);
border-radius: 15px 15px 0px 0px;
transform: none;
padding: 15px;
margin-top: -18px;
}
.media {
height: 230px;
background-image: url(https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
}
.common-text {
tab-size: 4;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif, serif;
-webkit-text-fill-color: rgb(35, 35, 35);
font-size: 18px;
letter-spacing: 0px;
line-height: 1.25;
}
</style>
</head>
<body>
<article id="prev-content">
<div class="media"></div>
<section id="content">
<div>
<span
style="
font-family: 'system-ui', '-apple-system',
'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'sans-serif', 'System Default', serif;
-webkit-text-fill-color: var(
--token-710882bd-9491-4cf6-bdf9-261847fdf8c6,
rgb(0, 255, 255)
);
font-size: 15px;
line-height: 1.2;
font-weight: 600;
"
>TECNOLOGÍA Y TENDENCIAS</span
>
</div>
<div>
<span
style="
font-family: 'Roboto Condensed', sans-serif;
-webkit-text-fill-color: hsl(0, 0%, 0%);
font-size: 26px;
line-height: 1.15;
font-weight: 700;
font-style: normal;
"
>Las ciberamenazas escalan entre las inquietudes de los CEO
españoles</span
>
</div>
<div>
<span
style="
font-family: 'system-ui', '-apple-system',
'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'sans-serif', 'System Default', serif;
-webkit-text-fill-color: hsl(0, 0%, 78%);
font-size: 14px;
line-height: 1.2;
font-weight: 500;
"
>Por Jean Francoise</span
>
</div>
<div
style="
width: 100%;
margin: 3px 0;
"
>
<svg
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
style="width: 100%; height: 3px;"
>
<path
d="M 0 0 L 300 0 L 300 3 L 0 3 Z"
fill="rgb(0, 255, 255)"
name="Rectangle"
/>
</svg>
</div>
<div>
<span
style="
font-family: 'system-ui', '-apple-system',
'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'sans-serif', serif;
-webkit-text-fill-color: #555555;
font-size: 18px;
line-height: 1.2;
"
>La encuesta anual que elabora la firma de consultoría PWC señala
que el 61% de los consejeros españoles ve en el cibercrimen una
amenaza para su empresa</span
>
</div>
<div
style="
width: 100%;
margin: 3px 0;
"
>
<svg
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
style="width: 100%; height: 3px;"
>
<path
d="M 0 0 L 300 0 L 300 3 L 0 3 Z"
fill="rgb(0, 255, 255)"
name="Rectangle"
/>
</svg>
</div>
<div>
<span
style="
font-family: system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif, serif;
-webkit-text-fill-color: rgb(0, 0, 0);
font-size: 18px;
line-height: 1.25;
"
><span
>La compañía norteamericana realiza desde hace más de 20 años un
análisis con las inquietudes de los empresarios de 42 territorios
distintos y permite establecer una comparativa seleccionando algún
país en concreto.</span
></span
>
</div>
<div>
<br />
<span
style="
font-family: system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif, serif;
-webkit-text-fill-color: rgb(0, 0, 0);
font-size: 18px;
line-height: 1.25;
"
>
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.</span
>
</div>
<div
style="
height: 263px;
background-image: url('https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
"
></div>
<div>
<br />
<span class="common-text">
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.
</span>
</div>
<div>
<br />
<span class="common-text">
A nivel global, los ciberdelitos no alcanzan ni comparte el primer
puesto la sobrerregulación, con un 36% de los encuestados situándo a
este indicador por delante de otros como los conflictos comerciales
(35% de los directivos) o la incertidumbre sobre el crecimiento
económico mundial (34%).
</span>
</div>
<div>
<span
style="
font-family: 'Roboto Condensed', sans-serif;
-webkit-text-fill-color: hsl(0, 0%, 0%);
font-size: 22px;
line-height: 1.2;
font-weight: 700;
font-style: normal;
"
>
El temor al cambio climático pasa del 3% al 20% en un año
</span>
</div>
<div>
<br />
<span class="common-text">
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.
</span>
</div>
<div>
<br />
<span class="common-text">
A nivel global, los ciberdelitos no alcanzan ni comparte el primer
puesto la sobrerregulación, con un 36% de los encuestados situándo a
este indicador por delante de otros como los conflictos comerciales
(35% de los directivos) o la incertidumbre sobre el crecimiento
económico mundial (34%).
</span>
</div>
<div
style="
height: 138px;
background-image: url('https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
image-rendering: pixelated;
"
></div>
<div
style="
height: 230px;
background-image: url('https://icdn2.digitaltrends.com/image/digitaltrends/kostenlose_programme_bildbearbeitung_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
image-rendering: auto;
"
></div>
<div>
<span class="common-text">
En este sentido, las ciberamenazas han escalado posiciones en el
ránking de las preocupaciones para los consejeros delegados de
España. Los delitos cibernéticos ya son su segunda inquietud, por
delante incluso de la incertidumbre política y la velocidad con la
que se producen los cambios tecnológicos que cada vez más empresas
implementan.
</span>
</div>
<div>
<br />
<span class="common-text">
A nivel global, los ciberdelitos no alcanzan ni comparte el primer
puesto la sobrerregulación, con un 36% de los encuestados situándo a
este indicador por delante de otros como los conflictos comerciales
(35% de los directivos) o la incertidumbre sobre el crecimiento
económico mundial (34%).
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="mrf-lazyDetails--extras" class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
<div>
<br />
<span class="common-text">
De esta manera, en consejo de los expertos consultados, hay que
empezar por material para los estiramientos: en este caso
colchonetas o esterillas. Se debe empezar por una sesión de carrera
suave, para ello es clave la cinta de correr. O la incertidumbre
sobre el crecimiento económico mundial (34%) con la que se producen
los cambios tecnológicos.
</span>
</div>
</section>
</article>
<style>
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 10;
}
.card {
will-change: transform;
transform: translate3d(0px, 380px, 0px);
opacity: 1;
transition: transform 350ms cubic-bezier(0, 0.35, 0.4, 1) 0s;
width: 100%;
min-height: 100vh;
background: white;
overflow: hidden;
border-radius: 15px 15px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 10px 3px;
}
</style>
<div class="container">
<div class="card">
<article>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
et molestias placeat culpa? Fugiat ut magnam nemo a nihil.
Recusandae nesciunt aspernatur quos. Odit aperiam fugit ducimus
consequuntur. Adipisci, animi!
</p>
</div>
</article>
</div>
</div>
<script>
const card = document.querySelector('.card');
const container = document.querySelector('.container');
const prevContent = document.querySelector('#prev-content');
const positionTop = 'translate3d(0px, 30px, 0px)';
const positionBottom = 'translate3d(0px, 380px, 0px)';
let currentPrevContentPosition;
card.addEventListener('transitionend', (e) => {
console.log('e.propertyName', window.scrollY);
if (card.style.transform === positionTop) {
container.style.position = 'relative';
currentPrevContentPosition = window.scrollY;
prevContent.style.transform = 'translate3d(0px, -' + currentPrevContentPosition + 'px, 0px)';
prevContent.style.position = 'fixed';
window.scrollTo(0, 0);
} else {
container.style.position = 'fixed';
prevContent.style.transform = '';
prevContent.style.position = '';
window.scrollTo(0, currentPrevContentPosition);
}
});
card.addEventListener('click', function () {
if (card.style.transform === positionTop) {
card.style.transform = positionBottom;
} else {
card.style.transform = positionTop;
}
});
</script>
</body>
</html>backface-visibility: hidden;连同
transform: translate3d(0, 0, 0);但它不起作用(您可以在代码中看到它)，但是如果您将 lorem ipsum 减少到
10，则当卡内的内容很长时会发生这种情况例如闪烁不会发生。
最佳答案
正如我们所知，固定位置不能很好地与 Safari 配合使用。
而当你齐心协力时—— Safari 会给你带来非常艰难的时光。
Position:Fixed === to parent
transform: translate3d(0px, 380px, 0px);
transition: transform 350ms cubic-bezier(0, 0.35, 0.4, 1) 0s;
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.card {
transition: none !important;
}
}
关于javascript - iOS Safari 13.5 在内容较长的固定元素上闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62779688/
25
4
0
IO 设备如何知道属于它的内存中的值在memory mapped IO 中发生了变化？ ？ 例如，假设内存地址 0 专用于保存 VGA 设备的背景颜色。当我们更改 memory[0] 中的值时，VGA
我目前正在开发一个使用Facebook sdk登录(通过FBLoginView)的iOS应用。 一切正常，除了那些拥有较旧版本的facebook的人。 当他们按下“使用Facebook登录”按钮时，他
假设我有: this - is an - example - with some - dashesNSRange将使用`rangeOfString:@“-”拾取“-”的第一个实例，但是如果我只想要最后
Card.io SDK提供以下详细信息: 卡号，有效期，月份，年份，CVV和邮政编码。 如何从此SDK获取国家名称。 - (void)userDidProvideCreditCardInfo:(Car
iOS 应用程序如何从网络服务下载图片并在安装过程中将它们安装到用户的 iOS 设备上？可能吗？ 最佳答案 您无法控制应用在用户设备上的安装，因此无法在安装过程中下载其他数据。 只需在安装后首次启动应
我曾经开发过一款企业版 iOS 产品，我们公司曾将其出售给大型企业，供他们的员工使用。 该应用程序通过 AppStore 提供，企业用户获得了公司特定的配置文件(包含应用程序配置文件)以启用他们有权使
我正在尝试将 Card.io SDK 集成到我的 iOS 应用程序中。我想为 CardIO ui 做一个简单的本地化，如更改取消按钮标题或“在此保留信用卡”提示文本。 我在 github 上找到了这个
我正在使用 CardIOView 和 CardIOViewDelegate 类，没有可以设置为 YES 的 BOOL 来扫描 collectCardholderName。我可以看到它在 CardIOP
我有一个集成了通话工具包的 voip 应用程序。每次我从我的 voip 应用程序调用时，都会在 native 电话应用程序中创建一个新的最近通话记录。我在 voip 应用程序中也有自定义联系人(电话应
iOS 应用程序如何知道应用程序打开时屏幕上是否已经有键盘？应用程序运行后，它可以接收键盘显示/隐藏通知。但是，如果应用程序在分屏模式下作为辅助应用程序打开，而主应用程序已经显示键盘，则辅助应用程序不
我在模拟器中收到以下错误: ImageIO: CGImageReadSessionGetCachedImageBlockData *** CGImageReadSessionGetCachedIm
如 Apple 文档所示，可以通过 EAAccessory Framework 与经过认证的配件(由 Apple 认证)进行通信。但是我有点困惑，因为一些帖子告诉我它也可以通过 CoreBluetoo
尽管现在的调试器已经很不错了，但有时找出应用程序中正在发生的事情的最好方法仍然是古老的 NSLog。当您连接到计算机时，这样做很容易； Xcode 会帮助弹出日志查看器面板，然后就可以了。当您不在办公
在我的 iOS 应用程序中，我定义了一些兴趣点。其中一些有一个 Kontakt.io 信标的名称，它绑定(bind)到一个特定的 PoI(我的意思是通常贴在信标标签上的名称)。现在我想在附近发现信标，
我正在为警报提示创建一个 trigger.io 插件。尝试从警报提示返回数据。这是我的代码: // Prompt + (void)show_prompt:(ForgeTask*)task{
您好，我是 Apple iOS 的新手。我阅读并搜索了很多关于推送通知的文章，但我没有发现任何关于 APNS 从 io4 到 ios 6 的新更新的信息。任何人都可以向我提供 APNS 如何在 ios
UITabBar 的高度似乎在 iOS 7 和 8/9/10/11 之间发生了变化。我发布这个问题是为了让其他人轻松找到答案。 那么:在 iPhone 和 iPad 上的 iOS 8/9/10/11
我想我可以针对不同的 iOS 版本使用不同的 Storyboard。 由于 UI 的差异，我将创建下一个 Storyboard: Main_iPhone.storyboard Main_iPad.st
我正在写一些东西，我将使用设备的 iTunes 库中的一部分音轨来覆盖 2 个视频的组合，例如: AVMutableComposition* mixComposition = [[AVMutableC
我创建了一个简单的 iOS 程序，可以顺利编译并在 iPad 模拟器上运行良好。当我告诉 XCode 4 使用我连接的 iPad 设备时，无法编译相同的程序。问题似乎是当我尝试使用附加的 iPad 时
我是一名优秀的程序员,十分优秀！