iPad 3 Webapp在移動Safari中崩潰

Question

我幾天來一直在調試我們的網絡應用程序，我不確定是什么導致它在移動游獵中崩潰。 該應用程序在iPad2上運行得非常好，但由於某些原因它在iPad3上崩潰了。 我評論了每一段代碼，似乎問題是元素的絕對定位。 這是我的部分代碼。

.page .main-content .study-bo {
   background: #F4F4F4;
   border-top: 1px solid #D1D1D1;
   border-bottom: 1px solid #D1D1D1;
   width: 644px;
   position: absolute;
   top: 501px;
   left: 0px;
   padding: 30px 40px;
   z-index:500;
   -webkit-transition: top .5s ease-in-out;
}   
.page .main-content .study-bo .text {
    width: 100%;
    height: 100%;
    position: relative;
    left:auto;
}
.page .main-content .study-bo p {
   font-family: "FrutigerRoman";
   font-size: 12px;
   color: #000000;
   margin-bottom: 15px;
}
.page .main-content .study-bo .study-design {
   width: 92px;
   height: 20px;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199, 199, 199, 1)), color-stop(100%,rgba(167, 167, 167, 1)));
   -webkit-border-radius: 5px 5px 0px 0px;
   border: 1px solid #999;
   font-family: "FrutigerItalic";
   font-size: 13px;
   color: white;
   text-shadow: 1px 1px 0px #8E8E8E;
   filter: dropshadow(color=#8e8e8e, offx=1, offy=1);
   text-align: center;
   padding-top: 4px;
   -webkit-box-shadow: inset 0px 1px 0px 0px #e5e4e4;
   position: absolute;
   top: -26px;
   font-style: italic;
   z-index: 50;
   left: 44px;
}
.page .main-content .study-bo .study-design .btn.active {
   background: #6c6a6a;
   text-shadow: 1px 1px 0px #434343;
   filter: dropshadow(color=#434343, offx=1, offy=1);
   -webkit-box-shadow: inset 0px 1px 0px 0px #9e9d9d;
}

代碼中導致應用程序崩潰的部分是：

   position: absolute;
   top: 501px;
   left: 0px;

我不確定這是不是蘋果蟲？ 我有多個元素定位絕對沒有問題。 如果我注釋掉這三行（並且只有那三行），該應用程序將起作用。 我已經嘗試評論我的代碼的其他部分並保留這三行，但它不起作用。 任何人都有任何建議？ 謝謝！

Answer 1

這可能是一個錯誤，但很難說沒有親眼看到和探索webapp。 我會嘗試擺弄布局，試圖：

• 得到相對定位的工作，而不是絕對的，
• 使用百分比代替頂部和左側屬性中的像素，
• 使用float：left或float：right，帶邊距或填充，而不是絕對定位，
• 在你的其他CSS之前應用一個CSS重置/規范化器，比如normalize.css ，看看它是否神奇地解決了這個問題，
• 或作為最后的手段，請考慮另一種不會強迫您在此處使用絕對定位的布局。

這些都是在黑暗中拍攝的，但也許他們會幫助。