Safari瀏覽器：固定背景+轉換

我有一個網站分爲您平常的垂直部分。頁眉和頁腳都包含帶背景附件的背景：固定。我有一個滑出式導航欄，您可以看到它在第一個鏈接上激活。一切正常，除了...

問題： Safari 6（我不確定關於5.1，但它似乎是在Mac上，因爲我的Windows Safari沒有問題）在動畫時有一個令人討厭的閃爍。這可以用通常的-webkit-backface hack解決，但是在使用這個時會出現一個新問題。固定背景圖像開始表現得非常糟糕，如果您足夠地滾動/調整瀏覽器大小，圖像會變形或者內容疊加不正確。有沒有其他的方法可以用於這種技術，或者是一種實際的修復方法？

HTML

<section>Hi <a href="#">CLICKME</a></section> 
<section>hi</section> 
<section>hi</section> 
<section>hi</section> 
<footer><p>I am some text</p></footer> 
<aside class="menu"> 
    I'm a menu. 
</aside>

CSS

body { 
    background: #222; 
    transition: all 0.3s; 
    -webkit-backface-visibility: hidden; 
} 

body.bump { 
    transform: translate(-258px, 0); 
} 

section { 
    background: #CBA; 
    color: white; 
    line-height: 450px; 
    font-size: 32px; 
    height: 500px; 
    position: relative; 
    text-align: center; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
    z-index: 1; 
} 
section:nth-child(2) { 
    background: #FAFAFA; 
} 
section:nth-child(3) { 
    background: #CCC; 
} 
section:nth-child(4) { 
    background: #ABC; 
} 

section:first-child { 
    background: url(http://placekitten.com/1600/500) center top; 
    background-attachment: fixed; 
    -webkit-backface-visibility: hidden; 
} 
@media all and (min-width: 73.75em) { 
    section:first-child { 
    background-size: cover; 
    } 
} 

footer { 
    background: url(http://placekitten.com/1400/500) center top; 
    background-attachment: fixed; 
    color: white; 
    font-size: 32px; 
    height: 500px; 
} 
@media all and (min-width: 73.75em) { 
    footer { 
    background-size: cover; 
    } 
} 
footer p { 
    position: fixed; 
    bottom: 200px; 
    left: 0; 
    text-align: center; 
    width: 100%; 
} 

aside.menu { 
    background: #222; 
    color: #FFF; 
    height: 100%; 
    padding-top: 30px; 
    position: fixed; 
    top: 0; 
    right: 0; 
    text-align: left; 
    transform: translate(516px, 0); 
    transition: all 0.3s; 
    width: 258px; 
    -webkit-backface-visibility: hidden; 
} 

.bump aside.menu { 
    transform: translate(258px, 0); 
}

JS（使用jQuery）

$('section a').click(function(e) { 
    $('body').toggleClass('bump'); 
});

來源

2013-05-22 Brian

我做了一個變通方法，通過將固定背景身體，包裹在身上的一切在另一個div中（反過來說，它不會影響身體背景），而且footer也一樣，罪過ce滾動到目前爲止，無論如何都無法彈出側欄（所以沒有動畫閃爍的擔心）。

來源

2013-06-04 15:05:32 Brian

Safari瀏覽器：固定背景+轉換

回答

相關問題