safari 相关问题

为什么 Safari 不接受 GZIP 压缩？

我这里有一个相当大的 JavaScript 文件，我想将其嵌入到我的网站中。 HTTP 服务器足够智能，可以在将文件传送到浏览器之前对其进行 GZIP。不过，我用 Google C 测试过...

无法在 safari 中提交使用 vuejs 创建的日期输入表单

我真的很喜欢Vuejs并且在工作中使用它。 前几天我遇到了一件令人费解的事情。 如果您对此有所了解，请告诉我。 有问题的代码如下 <question vote="0"> <p>我真的很喜欢 Vuejs 并在工作中使用它。</p> <p>前几天我遇到了一件令人费解的事情。</p> <p>如果您对此有所了解，请告诉我。</p> <p>有问题的代码如下</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { ref } from &#39;vue&#39; const createdAt = ref(&#39;&#39;) const submit = () =&gt; { console.log(&#39;submit&#39;) } const clear = () =&gt; { createdAt.value = &#39;&#39; } &lt;/script&gt; &lt;template&gt; &lt;form @submit.prevent=&#34;submit&#34;&gt; &lt;label for=&#34;createdAt&#34;&gt;CreatedAt&lt;/label&gt; &lt;input id=&#34;createdAt&#34; type=&#34;date&#34; v-model=&#34;createdAt&#34; /&gt; &lt;button type=&#34;button&#34; @click=&#34;clear&#34;&gt;Clear&lt;/button&gt; &lt;button&gt;Save&lt;/button&gt; &lt;/form&gt; &lt;/template&gt; </code></pre> <p>然后执行以下操作</p> <ol> <li>从日期输入表中选择日期</li> <li>单击清除按钮清空日期值</li> <li>单击“保存”按钮发送值</li> <li>此时chrome成功了，但是在safari中，点击保存按钮没有反应</li> </ol> <p><a href="https://i.stack.imgur.com/ZtGz8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1p0R3o4LnBuZw==" alt="enter image description here"/></a></p> <p>我希望保存按钮在 safari 中能够像在 chrome 中一样响应，并且可以提交日期。</p> <p>我使用的是 safari 版本 17.2.1。</p> <p>我检查了 ValidityState 值，看起来不错</p> <p>我在 React 中编写了相同的代码，并且运行良好</p> <pre><code>import { FormEvent, useState } from &#39;react&#39; function App() { const [createdAt, setCreatedAt] = useState(&#39;&#39;) const submit = (e: FormEvent) =&gt; { e.preventDefault() console.log(&#39;submit&#39;) } const clear = () =&gt; { setCreatedAt(&#39;&#39;) } return ( &lt;&gt; &lt;h1&gt;Vite + React&lt;/h1&gt; &lt;form onSubmit={(e) =&gt; submit(e)}&gt; &lt;label htmlFor=&#34;createdAt&#34;&gt;CreatedAt&lt;/label&gt; &lt;input id=&#34;createdAt&#34; type=&#34;date&#34; value={createdAt} // onInput={() =&gt; setCreatedAt(&#39;2025-01-22&#39;)} onChange={(e) =&gt; setCreatedAt(e.target.value)} /&gt; &lt;button type=&#34;button&#34; onClick={clear}&gt; clear &lt;/button&gt; &lt;button&gt;save&lt;/button&gt; &lt;/form&gt; &lt;/&gt; ) } export default App </code></pre> <p>感谢您阅读这个问题。</p> <p>希望你能得到答案。</p> </question> <answer tick="false" vote="0"> <p>根据我的测试，当日期字段值无效时，Safari 不允许提交表单。问题是，由于某些原因，手动将值设置为空字符串不会（总是）重置其状态并阻止提交。</p> <p><a href="https://play.vuejs.org/#eNqNVMtu2zAQ/BVCF9mALaJwD4UrG06DHNpDWzQ56qLH2mHCF0hKcWD437skIUVyjCAXm9yd2dkdrn1KbrTOuhaSdZLb2jDtiAXXasJLedgUibNFsi0kE1oZR05EwtE9sPp5QQzsyZnsjRIkxQJpIQtZK2kdqQ2UDpobRzYeNUvTeZ9iUrd9eP79jWLbSjCfmM3JZktOhSSD1GwUI8TjFYeMq8MsjbR0EetmXclbiJ+oSMjZS5xHjXEozVRk6DXSMJmmSPqUeih3VTxU6NVzGo1FG/HiQGiOkngjJN8rI8gujpFpAx1Ih67HQJEQqbAga3o8MnhZASfIQ9jQPL7RbX/OaYBs88oQ2rOi7+g6ssIZa7NmWoK4Vw0Y8mp465ZCNcAvMHRat2qdU7JnxhuidjVH6zzVW+S78985jYDr5H7m7X3ZwQSaU28THnM6cg+v1r1yfwwTrZkMXsWnqpRpwCxrxZVZ4+DN8BaBkyxws/Ex9+yQPVklcf0DDTtWQjMO5o92DB+7SNb92xdJybl6+RVizrSw6OP1I9TPV+JP9uhjRfLXgAXToa1DzpXmADiuT9/d/8ZtGyXR+ZYj+oPkP8BFbH2PEfajlQ22PcKFbn+GHy6Thwd7d3QgbT+UbzRsacAXCf6Ebz8Y/a3dVbYKPPQTXYx/DEtR6gsfY2JaBDVis4/OabumtG4k0nDLWGcyCY5KLegOYdS00jEBy0aJ3Sr7mn35Rhtm3TiegRXLyqgXtBarjCb3BYLfZmlA4h54Xz6ne0GbaF/k3ukPtpz/A5CizLQ=" rel="nofollow noreferrer">游乐场</a></p> <p>对我来说这看起来像是一个浏览器错误。我能找到的唯一解决方法是：</p> <ol> <li>将 <pre><code>novalidate</code></pre> 添加到 <pre><code>form</code></pre> 元素以完全禁用浏览器验证</li> <li>使用 <pre><code>&lt;button type=&#34;reset&#34;&gt;</code></pre> 以本机方式清除表单（如果这样做，请删除自定义逻辑），但这会影响此表单中的所有字段，而不仅仅是日期。</li> </ol> </answer> </body></html>

当 Virtual Kbd 打开时，Safari 布局视口与视觉视口相匹配

我使用 我使用 <meta name="viewport" content="interactive-widget=resizes-content, ...> 以便布局视口调整大小与视觉视口相同，以便所有内容都可见，并且当虚拟键盘打开时布局视口不会垂直滚动。这在 Android 上的 Chrome 中效果很好，但在 Safari 上则不然，因为它不受支持。 我已经进行了广泛的搜索和阅读，但到目前为止还找不到在 Safari 上实现此行为的解决方案。有什么建议么？这是我的应用程序 cibu.app - 请参阅 clibu.com 了解更多信息。 您可以尝试使用 visualViewport 代替窗口大小作为解决方法。 https://github.com/skorphil/nextjs-form/issues/13 但是，我也想在 Safari 中找到更好的方法。为什么该死的 safari 不能只使用默认元标记？

如何从 Safari 上的 <details> 元素中删除标记？

我已经尝试了其他帖子中建议的许多解决方案。两者均不适用于 macOS Safari 或 iOS Safari。我缺少什么，如何删除“Bob”上的三角形标记？ 截屏： 风格...

在 Safari 中无法正确计算 REM 填充

我正在尝试严格使用所有元素的 rem 值来构建一个网站。我在元素上有一些填充，但是在 Safari 中，这不能正确缩放。这是一个示例： html{ 字体大小...

SVG 变换动画在 Safari 中不起作用

我有一个简单的动画 SVG，在 Chrome/Firefox 中运行良好，但在 Safari 中根本没有动画。我知道这是由于 SVG 1.1 与 2.0（Safari 尚不支持 2.0）造成的，并且...

iOS 17 上网络应用程序的支持和信息

我定期使用通过 Safari 浏览器安装的 Web 应用程序 (PWA) 运行测试。然而，昨天，在测试过程中，我注意到该网络应用程序不再正确安装。这是至关重要的

Safari 浏览器未解码内容处置标头中设置的文件名

我使用 org.apache.catalina.util.URLEncoder 对文件名进行编码，并在 content-disposition 标头中设置如下： 字符串编码 = urlEncoder.encode(fileName, StandardCharsets.UTF_8); 回应。

在 iOS 17+ Safari 上检测隐身模式以进行重定向处理

我们的产品安全功能面临问题，其中涉及在 URL 中使用“fbclid”代码。在 iOS 17+ Safari 上，尤其是在隐身模式下，Apple 禁用了链接跟踪器，因为...

为什么 safari 是唯一将我的 https 网站标记为不安全的浏览器

我最近为客户的业务创建了一个网站。我们从 GoDaddy（与我们托管的平台相同）购买并设置了 OV SSL 证书。但由于某种原因，Safari 正在标记整个...

PHP 流式 webm 无法在 Safari 上运行

问题 我正在尝试通过 PHP 在 Safari 上进行 .webm 流式传输。由于某种原因，我在 Safari 中看到一个空的视频播放器。在其他浏览器上运行良好。 有所有要求的截图...

格式化和显示 UNIX 时间戳的时间的功能在 Safari 浏览器中不起作用

此 JavaScript 代码在 Safari 浏览器中不起作用，但在其他浏览器中运行良好。 代码从时间戳值返回时间或日期，但在 safari 浏览器中不起作用。在 safari 代码中返回：aN.aN.aN ...

在 html 中使用 setTimeout 时，iOS 上不会出现键盘

我在 Safari（特别是 WebKit）上运行脚本时遇到问题。以下是 HTML 代码示例： ...</desc> <question vote="0"> <p>我在 Safari（特别是 WebKit）上运行脚本时遇到问题。以下是 HTML 代码示例：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;script&gt; function delayedFocus(e) { e.preventDefault(); setTimeout(function() { e.target.focus(); }, 1000); // Adjust the delay time as needed (in milliseconds) } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt; &lt;input type=&#34;text&#34; id=&#34;testtext&#34; onmousedown=&#34;delayedFocus(event)&#34;&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>此脚本背后的逻辑是在用户单击文本框时引入 1 秒的延迟。 1 秒后，键盘应出现。 Android 移动设备上的测试显示了预期的行为。但是，在 iPhone 上，文本框获得焦点，但键盘不出现。在各种 iOS 版本上都观察到了此问题，该脚本仅适用于 iOS 15。</p> <p>如果您有任何见解或解决方案来解决此兼容性问题，我们将不胜感激。谢谢。</p> </question> <answer tick="false" vote="0"> <p>@momo 您可以尝试直接使用 focus 方法以及 touchstart 和 click 事件的组合，而不是依赖于 javascript 中的延迟和 mousedown 事件。更改此 touchstart 后，我能够解决键盘问题。希望对你有帮助。</p> <pre><code>&lt;input type=&#34;text&#34; id=&#34;testtext&#34; ontouchstart=&#34;handleTouchStart(event)&#34;&gt; function handleTouchStart(e) { e.target.addEventListener(&#39;click&#39;, delayedFocus); } </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;script&gt; function focusInput(e) { e.preventDefault(); var hiddenButton = document.getElementById(&#39;hiddenButton&#39;); hiddenButton.focus(); setTimeout(function() { var testText = document.getElementById(&#39;testtext&#39;); testText.focus(); }, 1000); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt; &lt;input type=&#34;text&#34; id=&#34;testtext&#34; onmousedown=&#34;focusInput(event)&#34;&gt; &lt;/li&gt; &lt;/ul&gt; &lt;button id=&#34;hiddenButton&#34; style=&#34;display: none;&#34;&gt;&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <ul> <li><p>在这段代码中，我编写了当用户单击输入字段时隐藏按钮将获得焦点，并且键盘将按预期显示。延迟 1 秒后，焦点转移到实际输入字段。</p> </li> <li><p>您遇到的问题与 Safari 在 iOS 上处理焦点事件的方式发生变化有关。当输入字段以编程方式聚焦时，Safari 现在不会立即显示键盘。通过让浏览器选择何时显示键盘，而不是每次定位输入字段时立即弹出键盘，这样做是为了改善用户体验。</p> </li> <li><p>不幸的是，这个问题没有简单的解决方案，因为它是 Safari 行为的变化而不是错误。</p> </li> </ul> </answer> </body></html>

如何在 Safari 15 中控制网站着色

在 Safari 15 中，发布了一项新功能，该功能可以对地址栏和选项卡栏进行着色以匹配当前网站标题的颜色。 我注意到这个新功能不适用于任何...

iOS Safari：多余的底部空白颜色错误

在调试另一个 iOS 问题时，我偶然发现了一个看起来非常奇怪的 iOS Safari 错误。 源代码：https://github.com/Maximaximum/ios-safari-bottom-white-space 演示：https://

Safari CSS 会导致元素与某些“height”值垂直错位

以下代码在 Chrome 和 Firefox 上显示正常，但在 Safari（17、Mac+IpadOS）上，条形基线正在变化。 更奇怪的是（这让我认为这可能是渲染问题），它可能是

全屏 API 无法在 safari、ios 上运行

所以，我使用这段代码： vartoggleBtn = false; 函数 btnClick() { 切换Btn = !切换Btn; document.getElementById("testText").innerHTML =toggleBtn; 如果（切换Btn）{ 打开全文...

输入选择框在 Safari 中不使用填充

我有一个输入选择框，我必须对齐此框中的文本。 在 Google Chrome、Firefox 和 IE 中 <= 9 it works fine. But the Safari don't use the padding.. Here my code: 我有一个输入选择框，我必须对齐此框中的文本。 在 Google Chrome、Firefox 和 IE 中 <= 9 it works fine. But the Safari don't use the padding.. 这是我的代码： <select class="anrede1"> <option>Frau</option> <option>Herr</option> </select> .anrede1, .land { font-family:'Roboto Condensed'; font-size: 22px; color: #575656; margin: 10px 10px 10px 0px; width: 100%; height: 42px; text-align: left; padding-left: 17px; border: 2px solid #e1eef9; font-weight: 300; } http://jsfiddle.net/jhne7pfe/ 有一些解决这个问题的想法吗？ 这是一个迟到的答案，但我一段时间以来一直在寻找同一问题的解决方案。使用文本缩进将元素移动到输入元素周围，并且填充仍然被忽略。 -webkit-appearance: textfield; 使用它解决了我的问题，希望这可以节省其他人的时间。 据我所知，W3 规范不允许在选择字段中使用填充。所以Safari不支持。 但是您可以使用以下内容代替padding-left： text-indent:17px; 这应该可以正常工作。 不确定我上次的评论回复是否通过了： 由于我这里没有安装 Safari，我希望这会有所帮助。尝试使用： padding-left:17px; -webkit-padding-start:17px; 而不是 text-indent: 17px; -webkit-padding-start 仅适用于 chrome 和 safari 浏览器，如果 padding-left 有效，则应自动忽略。 不幸的是我还没有 jsfiddle 帐户。 将尽快完成;-) 不再工作了。 -webkit-appearance: textfield;❌ 如果你想在 Safari 设备中填充。你必须使用： select{-webkit-appearance: initial;-moz-appearance: initial;appearance: initial;}✅ select{ -webkit-appearance: initial; -moz-appearance: initial; appearance: initial; padding: 15px 40px; border: 1px solid #dddddd; background-color: #fcfcfc; border-radius: 5px; cursor: pointer; } <select> <option>Select A</option> <option>Select B</option> </select>

同一设备/浏览器上不同域的不同用户代理？

当我访问 hackerweb.app 时，我得到以下 userAgent： Mozilla/5.0（Macintosh；Intel Mac OS X 10_15_6）AppleWebKit/605.1.15（KHTML，如 Gecko）版本/14.0.3 Safari/605.1.15 当我访问黑客时...

Safari：列表项编号与浮动范围重叠

我维护一个具有交互式内联脚注的网站，这些脚注作为浮动 元素（带有 float:left）插入到脚注编号后面的段落中。这个想法是......