safari中高度100%失效问题及解决方案 - 掘金
- -这是一个在Vue项目中嵌套iframe产生的问题，具体表现为：在Safari浏览器中，页面渲染完成后，拉伸页面宽度，iframe中的内容高度溢出，且无法滚动到溢出部分. chrome、firefox都没有发生这个问题，虽然知道是CSS在Safari中的解析差异引起的，但具体是什么原因，还需要做定位，避免后续同类问题的采坑.
safari中高度100%失效问题及解决方案 - 掘金
标签：
| 发表时间：2019-07-11 21:53 | 作者：
出处：https://juejin.im
这是一个在Vue项目中嵌套iframe产生的问题，具体表现为：在Safari浏览器中，页面渲染完成后，拉伸页面宽度，iframe中的内容高度溢出，且无法滚动到溢出部分。
chrome、firefox都没有发生这个问题，虽然知道是CSS在Safari中的解析差异引起的，但具体是什么原因，还需要做定位，避免后续同类问题的采坑。
vue项目源代码大致如下：
<html>
<head>
<style>
.app { width: 100%;height: 100%;display: flex;flex: 1;flex-direction: column; }
header { width: 100%;height: 75px; }
main { flex: 1; }
iframe { width: 100%;height: 100%;}
</style>
</head>
<body>
<div class="app">
<header></header>
<main>
<iframe v-if="true"></iframe> <div v-else></div>
</main>
</div>
</body>
<html>复制代码 上面代码乍看没啥问题，可以在chrome中完美执行，但其实踩了 spec的一个坑
大体意思是，具有百分比高度的元素的父级必须具有已定义的高度,并且必须具有height属性.否则,具有百分比高度的元素必须默认为height：auto(内容高度)。
chrome会自动弥补这个问题，但是Safari会认为这是一个缺陷，iframe的父级没有给定的高度，直接导致iframe高度塌陷（随内容高度）。所以在拉伸浏览器窗口的时候，iframe内容实际高度产生了变化，导致该问题的出现。
解决方案：
1. 给定父级指定高度
main { flex: 1;height: calc(100% - 75px); }复制代码 2. 直接给iframe子级指定高度
iframe { width: 100%; height: calc(100vh - 75px); }复制代码 这里不用100% - 75px，是因为100%依赖于父级指定高度，而vh是直接已浏览器可是窗口高度为基准的。
但是解决方案1存在一个问题：在低版本Safari，不支持height: calc() 方法， MDN解释。
相关 [safari 高度 问题] 推荐：
为何Safari不如Chrome？
- - 月光博客 Safari是乔布斯在2003年的Macworld大会发布的，9年过去了，08年才发展起来的Chrome用了不到Safari一半的时间远远把Safari甩在了后面，这让Safari情何以堪. Chrome的市场份额从2008年的0%开始，发展到了现在的25%，而苹果的Safari似乎一直徘徊于5%-8%之间.
Safari 5.0.1到来 包含扩展中心
- tom - cnBeta.COM带有扩展的Safari浏览器终于来了，这意味着Firefox和Chrome终于迎来了新对手. 这就是苹果最新发布的带有5.0.1版本，新版不但带来了HTML5和CSS3以及JavaScript新标准支持，最重要的是Safari Extensions Gallery特性，首批为苹果制作扩展的厂商有MLB.com, The New York Times和Twitter、eBay等大户人家，扩展中心也可以通过访问extensions.apple.com抵达.
iOS 5中safari带来的新特性
- mingelz - 前端观察随着iPhone4s的发布，iOS5也正是发布了，增加了很多很有用的新特性，不过对于前端开发者来说，最关心的还是浏览器，让我们来看一下苹果为iOS5中的safari新增了哪些新特性吧. 终于支持position:fixed了；. 支持overflow:scroll了，通过-webkit-overflow-scrolling: touch;来实现：
1
2
3
4.
iOS 6中Safari对HTML5的支持
- - 前端观察iOS6发布了beta版，其中包括了新版的Safari浏览器，增强了对HTML5的支持，我们来了解下吧~~. 目前，ios 5.1中safari在HTML5test.com的测试得分是324，而ios 6中safari的分数是360. 终于支持这个了，可以在浏览器中上传照片文件什么的了. 这个大家也期待已久了吧，不多解释.
10款Safari for Mac扩展插件推荐
- - 极客范 - GeekFan.net浏览器作为用户迈入互联网的直接窗口，之间的竞争是可想而知的. Safari 作为苹果的御用浏览器，随着 Mac OS X Lion 的发布重获新生，目前经历了几个版本的迭代，拓展性上虽仍不如 Google Chrome ，但在 Mac OS 下，Safari 的稳定和速度，以及对整个生态圈各项服务的支持，体验早已今非昔比.
取代iPad Safari瀏覽器的兩款選擇： Sleipnir Mobile、 iChromy
- Hming - 電腦玩物從結論來看，既然上圖我用了「Sleipnir Mobile」的截圖，可見我自己最後是比較偏愛Sleipnir Mobile更勝於iChromy. 其實，這兩款瀏覽器的核心應該都和iPad原本的Safari一致，所以瀏覽速度等技術問題上沒有太大差別，關鍵的不同就在於附加功能、介面設計上的各有千秋. 「Sleipnir Mobile」的優點在於那極有創意，為手指操作貼心設計，非常順手的分頁瀏覽與管理方式，例如我最喜歡的「分頁群組」也有被實作出來.
移动Safari中内嵌页面的翻页方法
- Coolxll - Tip4Mac这是一个比较简单的技巧，熟悉的同学可以直接忽略掉. 我们在移动设备的Safari里面浏览某些网站时候会遇到一些页面内再内嵌网页的情况. 就是当前浏览的页面上有一部分内是另外一个页面. 比如如果在iPad上打开Google Reader以后用启用桌面模式的时候文章页面就是内嵌形式. 这时候如果你想看下面的文章的话发现用一只手指移动页面是外面的框架移动而不是框架内.
iOS上的Safari也有“后悔药”可吃了
- Jona - Tip4MaciOS 5: 有一件事儿我想肯定每个人都遇到过. 就是开着浏览器上网的时候一不小心就把一个正在浏览的标签页关掉了. 如果你在Mac上，你可以用cmd+shift+T (Chrome, Firefox)或者cmd+Z (Safari)来迅速打开刚刚不小心关掉的标签页. 其实在iOS 5中的Safari加入的一个新功能也可以让你做同样的事情.
iReader 讓Firefox、 Google Chrome也有 Safari好讀閱讀器
- Jona - 電腦玩物之前寫過「Readability 三個優化網頁易讀性的瀏覽器書籤工具，輕鬆把網路當電子書來閱讀」一文後，我自己在Firefox或Google Chrome上就一直沿用裡面提到的書籤小工具，讓我想要「專注閱讀」某一篇部落格文章時，可以聚焦凝神、摒除干擾，用自訂性更高的舒適版面來閱讀內容. 不過，最近使用更新到iOS 5的iPad 2，最喜歡的功能之一就是好用的Ssfari閱讀器，於是便想找找看電腦端有沒有類似的工具，也就找到了今天這款很多人推薦過的「iReader」套件，同時有Firefox和Chrome版本可以下載.