Bug 183106

Summary:

css env(safe-area-inset-top) or constant(safe-area-inset-top) value doesn't exist at first

Product:

WebKit

Reporter:

yuxian.lxy

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

jarek, thorton, webkit-bug-importer, wenson_hsieh, zhouqicf

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

iPhone / iPad

OS:

iOS 11

Attachments:

Description	Flags
demo video	none

Description yuxian.lxy 2018-02-24 20:34:41 PST

Created attachment 334572 [details]
demo  video

please watch the follow video, u can see the css env(safe-area-inset-top) or contant(safe-area-inset-top) value doesn't exist at first, u can see the red area was getting higher slowly

  demo page : https://pages.tmall.com/wow/chaoshi/act/sa-test

Comment 1 yuxian.lxy 2018-02-24 20:36:56 PST

Demo Source code:

<!doctype html> 
<html lang="zh-cmn-Hans">
<head>     
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">  
    <title>天猫超市</title>
    <meta name="apple-mobile-web-app-title" content="天猫超市">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">   
    <link rel="apple-touch-icon" href="//img.alicdn.com/tps/TB1TaKUPpXXXXbBXVXXXXXXXXXX-152-152.png">
    <style>
        *{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%}li,ol,ul{list-style:none}em,i{font-style:normal}img{border:none}img,input{vertical-align:middle}a,html{-webkit-tap-highlight-color:transparent}body{font:12px/1.5 "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;background-color:#f0f0f0;color:#3d4245;min-height:100vh;-webkit-text-size-adjust:none}a{text-decoration:none;color:inherit}
    </style>
    <style>
        body::after{
            content: '';
            display: block;
            position: absolute;
            z-index: 1111111;
            top:0;
            left:0;
            height: env(safe-area-inset-top);
            padding-top: 10px;
            right: 0;
            background-color: red;
        }
    </style>
 </head>
 <body>
 </body>
 </html>

Comment 2 Radar WebKit Bug Importer 2018-02-24 22:06:06 PST

<rdar://problem/37865615>

Comment 3 zhouqi 2018-05-21 08:42:47 PDT

any progress?

Comment 4 yuxian.lxy 2018-08-30 18:50:31 PDT

Any progress??