固定位置在 iOS10 上的 Google App 中无法正常工作答案

【问题标题】：fixed position not working correctly within Google App on iOS10固定位置在 iOS10 上的 Google App 中无法正常工作
【发布时间】：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，但没有运气

以前有人见过这个问题吗？我们应该如何解决它？

【问题讨论】：

标签： ios css iphone google-search

【解决方案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 的高度。

【讨论】：