固定位置在 iOS10 上的 Google App 中无法正常工作
Posted
技术标签:
【中文标题】固定位置在 iOS10 上的 Google App 中无法正常工作【英文标题】：fixed position not working correctly within Google App on iOS10 【发布时间】：2017-08-17 08:43:09 【问题描述】：背景
有一个 ios 应用程序，名为“Google - 专为移动设备制作的搜索”（它是该应用程序中的某种内部浏览器）。我们的团队被要求支持它。
我们有一个按钮，应该放在视图的底部，所以我们选择了position: fixed 和bottom: 60px 来满足这个要求。
环境
设备：iPhone7 iOS：10.3.3 古尔应用：33.0.164895372
问题
Safari：工作 铬：工作 谷歌应用程序：不工作。似乎 google-app 的内部浏览器永远不知道正确的视口高度，在垂直滚动时，按钮要么显示在正确的位置，要么只是丢失（低于实际视口底线）
我什至尝试使用父容器（全屏）
position: absolute，但没有运气
以前有人见过这个问题吗？我们应该如何解决它？
【问题讨论】：
【参考方案1】：我在 iOS 上的 Google App 中遇到了同样的问题。一个 100% 高度的网站，上面和下面都有绝对定位的元素。
原因
Google App 中的视口高度被正确检测到，但默认情况下，Google App 会将其地址栏放在网站的顶部，并将其他一些栏放在网站的底部。因此，这些属于 Google 应用的元素就像您网站上的绝对定位元素。
但是，当您打开网站时，Google 应用程序会“向下滚动”一点网站，以便网站顶部位于地址栏下方（否则您的网站顶部将被隐藏。但这会推动整个像向下 30px 的网站，对于 100% 高度的网站，它看起来像视口是 100% + 30px。当您滚动一点顶部的地址栏和底部的另一个栏消失时，网站将显示完美。
解决方法
向主体添加一个指令，将应用程序的高度重新调整为视口的内部高度。在我的情况下工作。
<body force-full-height>
<!-- Your content -->
</body>
...
(function ()
var app = angular.module('my.directives', []);
app.directive('forceFullHeight', forceFullHeight);
forceFullHeight.$inject = [
'$window',
'$rootScope'
];
function forceFullHeight($window, $rootScope)
return
restrict: 'A',
link: function link(scope, element, attrs)
function onResize()
element.css('height', $window.innerHeight + 'px');
;
function cleanUp()
angular.element($window).off('resize', onResize);
angular.element($window).on('resize', onResize);
scope.$on('$destroy', cleanUp);
scope.$on('$viewContentLoaded', onResize());
;
)();
【讨论】：
【参考方案2】：iOS 上的 Google App 版本 57.0 修复了该问题。 页眉栏和页脚栏现在改变 webview 的高度。
【讨论】：
以上是关于固定位置在 iOS10 上的 Google App 中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
Google App Engine 上的传出 HTTP 请求位置
IOS : Cordova App Crash on Google Map api zoom in ios 11.3 iphone x
iOS 10 Safari：防止在固定覆盖层后面滚动并保持滚动位置