如何修复iOS 10.3.1中Safari的html边距底部错误

Question

我在iOS 10.3.1中注意到，在使用safari并激活虚拟键盘时，您可以将页面一直向上滚动并在html元素和虚拟键盘之间留下空白区域（与主体颜色相同）。

您可以看到蓝色区域是检查员认为的html元素，并且在虚拟键盘和html之间存在白色间隙（如果我将体背景设置为黑色则为黑色）。

请注意，此间隙不会自动显示。键盘出现时必须向上滚动。我注意到了这一点，因为我使用javascript向上滚动来修复中文9键盘键盘的错误（它将覆盖屏幕的底部，恰好是textarea）。

Answer 1

您可以使用此：

var aws = require('aws-sdk');
exports.handler = async function(event, context, callback) {
    // Here, Stripe will give response.
    const stripe = require('stripe')('XXXXXXXXX');
    const StripeCustomer =  await stripe.customers.create({
        description: 'My First Test Customer (created for API docs)',
        email: 'test@gmail.com',
        name: 'shdfahsdfjqoiwer123'
    });
    console.log('==>>======StripeCustomer====>>', StripeCustomer);


    // Start - DynamoDb
    aws.config.update({
        accessKeyId: 'XXXXXXXXX',
        secretAccessKey: 'XXXXXXXXX',
        region: 'XXXXXXXXXXXXX'
    });
    var dynamodb = new aws.DynamoDB.DocumentClient();
    var paramsGet = {
        TableName: 'gateways'
    };
    dynamodb.scan(paramsGet, async(err, data) => {
    
    // Here, Stripe will not give any response.
        const stripe = require('stripe')('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
        const StripeCustomer = await stripe.customers.create({
            description: 'My First Test Customer (created for API docs)',
            email: event.email,
            name: uuid
        });
        console.log('==>>======StripeCustomer====>>', StripeCustomer);
        console.log('I\'m here');
    });
}

第二行将推动该元素填充屏幕。

关于黑客的更多信息：https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

Answer 2

最近，我遇到了类似Cordova WebApp和iOS10的情况。当时的问题是，主视图容器的高度为100％而不是100vh。查看您的CSS或更新您的帖子以获取更多信息。

Answer 3

我对canvas元素有一个类似的问题，它占用了网页的高度，但在滚动时却在其下方有空白。我将画布设置为display: block;。这为我解决了问题。这是我问why is there white space under the canvas when I scroll down的问题。尝试将元素的display属性更改为block，看看是否有帮助。

Answer 4

使用图书馆。例如，您的问题是使用“垂直高度”设置为100的引导程序中的一项琐碎任务。

<div class="vh-100"></div>

Answer 5

有同样的包。我用 css 修复它。

html, body {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

Answer 6

Safari不再支持Webkit