固定的位置div在iOS6上顯示透明Safari

Question

我目前有一個div，當在手機分辨率上顯示並且應該顯示作者內容時，該div在頁面底部更改爲固定位置。當點擊這個div時，使用jquery向上滑動菜單。此時，div顯示爲透明，但是當點擊div應該位於的位置時，它會像打開應用程序一樣滑動菜單。

我不知道發生了什麼，但是我所做的所有調試都沒有任何結果。有沒有人經歷過這個，或者知道如何解決它？

下面是那塊HTML/CSS：

<div id="secondaryBox" class="span6 pull-right"> 
        <div id="author" class="collapsed"> 
         <?php if(!empty($user['avatarPath'])){?> 
          <img src="<?php echo $user['avatarPath'] ?>" class="avatar avatar-50 photo avatar-default" height="50" width="50" /> 
         <?php }else{ 
          echo get_avatar($current_user, 50); 
         } ?> 
         <h5><?php echo $user['displayName']; ?></h5> 
         <h6><span class="hidden-phone"><?php echo get_current_user_role($user['role']) ?>, </span><?php echo $user['schoolName']; ?></h6> 
         <div id="phoneCaret" class="circleCaret visible-phone"><b class="caret"></b></div> 
        </div> 
        <?php if (current_user_can('read')) { ?> 
        <div id="hiddenMenu"> 
         <div class="addMenu hidden-phone collapsed"> 
          <span>Additional Options </span> 
          <div class="circleCaret"><b class="caret"></b></div> 
         </div> 
         <ul id="slideOutMenu"> 
          <?php if (current_user_can('add_users')) { ?> 
           <li><a href="/wp-admin/admin.php?page=users"><i class="icon-th-list icon-white"></i> Manage Users</a></li> 
           <?php if(is_super_admin($current_user->ID)){?> 
           <li><a href="/wp-admin/admin.php?page=import"><i class="icon-th-list icon-white"></i> Export Users</a></li> 
           <?php }?> 
           <li class="divider"></li> 
          <?php } 
          if (current_user_can('manage_categories')) { ?> 
           <li><a href="<?php $networkURL ?>/wp-admin/network/sites.php"><i class="icon-plus icon-white"></i> Create School</a></li> 
           <li><a href="/wp-admin/edit-tags.php?taxonomy=category"><i class="icon-tags icon-white"></i> Manage Categories</a></li> 
           <li><a href="/wp-admin/admin.php?page=school_settings"><i class="icon-edit icon-white"></i> School Settings</a></li> 
           <li class="divider"></li> 
          <?php } 
          if (current_user_can('manage_network_options')) { ?> 
           <li><a href="/wp-admin/network/sites.php"><i class="icon-globe icon-white"></i> Network Sites</a></li> 
           <li><a href="/wp-admin/options-general.php"><i class="icon-wrench icon-white"></i> Settings</a></li> 
           <li><a href="/wp-admin/admin.php?page=wpengine-common"><i class="icon-cog icon-white"></i> WP Engine Settings</a></li> 
           <li><a href="/wp-admin/options-general.php?page=limit-login-attempts"><i class="icon-wrench icon-white"></i> Login Attempts</a></li> 
           <li class="divider"></li> 
          <?php } ?> 
          <li><a href="/wp-admin/admin.php?page=dashboard"><i class="icon-home icon-white"></i> My Dashboard</a></li> 
          <li><a href="<?php echo network_site_url(); ?>"><i class="icon-globe icon-white"></i> Dewsly.com</a></li> 
          <li><a href="/wp-admin/admin.php?page=profile"><i class="icon-user icon-white"></i> My Profile</a></li> 
          <li><a target="_blank" href="http://support.dewsly.com"><i class="icon-question-sign icon-white"></i> Support</a></li> 
          <li><a onclick="return confirm(\'Do you really want to logout?\')" href="<?php echo get_site_url(1); ?>/?my_error=logout"><i class="icon-off icon-white"></i> Logout</a></li> 
         </ul> 
        </div> 
        <?php } ?> 
       </div> 

CSS：

#author{ 
     position:fixed; 
     bottom:0; 
     left:0; 
     width:100%; 
     background-color:#212121; 
     height:70px; 
     z-index: 1001; 
     overflow:hidden; 
     cursor:hand; 
     padding:10px; 
     border-top:1px solid #595555; 
    } 
#secondaryBox { 
     height: 0px; 
     position:fixed; 
     bottom:70px; 
     width:100%; 
     overflow:auto !important; 
     left:0; 
     z-index: 100; 
    } 

Answer 1

經過相當多的讀書問題是有一個滾動的div內的固定位置股利。從這裏鏈接的帖子的評論中給出的信息給了我指導。雖然這很令人沮喪，但至少我現在知道如何解決這個問題。

http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

Answer 2

難看，但工作這個解決方案;

setTimeout(function() { 
     $("#fixedElement").css("right", "373px"); 
    }, 100); 

我不知道爲什麼，當您更改/設置元素的位置後，它會再次變爲可見。