我在 iOS 12.3.1 Safari 中遇到了一些奇怪的事情。 这个问题至少可以追溯到 iOS 12.2，但我想这个问题的存在时间要长得多。
当尝试将元素与视口(viewport)的底部轴对齐时，问题就会显现出来，并且在纵向和横向模式下都是一个问题。
为了重现问题，元素必须有 fixed 或 absolute 的 position，但是您是否使用 top 和 transform 或 bottom 定位元素。
问题仅在纵向模式下出现，如果 Safari 正在显示其压缩的 URL 栏，它取代了正常的 URL 和菜单栏，并且没有垂直溢出。
普通 URL 和菜单栏//压缩 URL 栏
值得注意的是，仅当存在垂直溢出且浏览器向下滚动或浏览器的方向从纵向更改为横向然后再返回时(无论是否存在垂直溢出)，才会显示压缩菜单栏).
通过垂直溢出改变方向//没有溢出
我不确定这里到底发生了什么。
横向模式的问题总是且仅当正常导航栏显示在页面顶部时才会出现。由于向下滚动或方向从纵向变为横向，导航栏只会在横向模式下隐藏。
垂直溢出
没有垂直溢出
有趣的是，横向模式下导航栏的高度明显偏移了视口(viewport)，因此 bottom: 0 或 top: 100% 的位置被推到了显示导航栏时的视口(viewport)。
这是一个 super hack-ish 的解决方法，也是一个糟糕的解决方法，但这是迄今为止唯一导致 position: fixed; 的方法。 bottom: 0; 如果没有溢出，在切换方向后将元素实际定位在视口(viewport)底部。
<div style='height: 0'>
<!-- the quantity of <br> elements must create vertical overflow -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- this does not work without the space character -->
</div>
但是，我只是注意到它会产生不可见的垂直溢出，因此至少在 Safari 和 Chrome 中会产生不必要的垂直滚动。我还担心它可能会在我无法测试的其他浏览器中的其他设备上引起其他问题。
由于这个错误，为了用户体验，网站有时不得不看起来像垃圾，这真是太糟糕了。
最佳答案
你好，这个问题一开始让我很困惑，我回想起我花了几个小时在 HTML 和 CSS 中徘徊，试图把事情做好的日子。唉，所有那些痛苦的时光都是为了这一刻。
vh 过去是根据浏览器的当前视口(viewport)计算的。如果您在浏览器中加载网站，1vh 等于屏幕高度的 1%，然后减去浏览器界面。
但是!如果你想滚动，它会变得棘手。一旦您掠过浏览器界面(在本例中为您的地址栏)，您的内容就会出现奇怪的跳转，因为 vh 会更新。
iOS 版 Safari 实际上是最先实现修复的公司之一。他们根据最大屏幕高度设置固定的 vh 值。那么用户就不会体验到内容的跳跃，但是......是的，总有一个但是......
拥有固定值非常棒，除非你想要一个完整尺寸的元素，或者在屏幕底部有固定位置的元素，因为那样它会被裁剪掉!
那是你的问题....和它说再见吧，因为...
这就是您的解决方案!
CSS:
.my-element {
height: 100vh; /* This is for browsers that don't support custom properties */
height: calc(var(--vh, 1vh) * 100);
}
js:
// Get the viewport height and multiply it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then set the custom --vh value to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
现在您可以像使用任何其他 vh 单位一样使用 --vh 作为您的高度值，将它乘以 100 就得到我们想要的完整高度。
还有一件事，上面的 js 会运行，但是当视口(viewport)改变时我们永远不会更新元素的大小，所以这还行不通，你需要一个监听器......
更多js:
// We listen to the resize event
window.addEventListener('resize', () => {
// Update the element's size
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
干杯!
关于html - Safari 视口(viewport)错误，固定位置和底部或顶部的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56622926/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe
在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie