：divの後がipadで非表示になっています

Question

：セレクタdivが信号divより大きくなく、切り捨てられた後に表示されます。 何らかの理由でdivがipadでカットされていますが、ブラウザの表示は問題ありません。

ブラウザの左側に表示され、実際のデバイスが右側に表示されます。 は写真を参照してください。

.validationWrapper .ui-dialog-titlebar.ui-corner-all { 
    font-size: 16px; 
    background: #f86161; 
    color: #fff; 
    border-bottom: 1px solid #e04343; 
} 

.validationWrapper { 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    max-width: 450px; 
    height: 250px !important; 
    top: 46% !important; 
    right: 8.2% !important; 
    left: auto !important; 
    background: #fff !important; 
} 

    .validationWrapper:after { 
     width: 15px; 
     height: 15px; 
     position: fixed; 
     transform: rotate(45deg); 
     top: 48%; 
     z-index: 1; 
     right: 7.85%; 
     background-color: #f86161; 
     content: ""; 
     box-shadow: -1px -1px 3px rgba(0,0,0,.15); 
    } 

@media (max-width: 768px) { 

    body.ios7 .validationWrapper { 
     max-width: 441px !important; 
     height: 250px !important; 
     top: 16% !important; 
     right: 20.2% !important; 
     left: auto !important; 
    } 

     body.ios7 .validationWrapper:after { 
      background-color: #f86161; 
      top: 161px; 
      left: 26%; 
     } 
} 

Answer 1

私は一目で見ていたものから：ここで

は、CSSコードである

• あなたの.validationWrapperオブジェクトにposition: relativeを適用する必要があります。
• は、あなたはそれが唯一のウィンドウ内の特定の位置にその要素が表示されますので、擬似要素は良い習慣ではないあなたのためのposition: fixedを使用してabsolute

にfixedから.validationWrapper:afterの位置を変更し、しません必要がありますスケーラブル/移動可能。

.validationWrapper { 
    position: relative; /* <=== New rule */ 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    max-width: 450px; 
    height: 250px !important; 
    top: 46% !important; 
    right: 8.2% !important; 
    left: auto !important; 
    background: #fff !important; 
} 

.validationWrapper:after { 
    width: 15px; 
    height: 15px; 
    position: absolute; /* <=== New Rule */ 
    transform: rotate(45deg); 
    top: 48%; 
    z-index: 1; 
    right: 7.85%; 
    background-color: #f86161; 
    content: ""; 
    box-shadow: -1px -1px 3px rgba(0,0,0,.15); 
} 

そして、その後あなたは、その新しい位置のニーズに合わせて擬似要素（:after）を揃える必要がありますので、同様

。