WebKit перакладаць + фіксаваны фон-ўкладанне памылку

http://jsfiddle.net/MR94s/

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
}

section {
    position: relative;
    width: 100%;
    display: table;
    height: 450px;
    border-bottom: 2px solid #E6EAED;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background-color: #333;
    background-repeat: repeat;
    background-position: center center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('http://placekitten.com/600/600');
}

Глядзіце вышэй скрыпку. Я выкарыстоўваю падобную структуру ў праекце я працую. Гэта старонка з якія чаргуюцца секцыямі, па адным для ўтрымання і адной дзейнічае ў якасці дзельніка з пакрыццём і фіксаванага фонавага малюнка.

Працуе добра, але па нейкай прычыне пры ўжыванні трансліт да элемента з фіксаваным фонам ці яго бацькі, фон знікае цалкам або пакідае некаторыя артэфакты і часткі выявы.

Выдатна працуе ў любым іншым браўзэры. Не было ніякай поспехі ў пошуках рашэння, таму я спадзяюся хто-то можа дапамагчы мне з гэтым.

Загадзя дзякую!

11
Яго, мабыць, вядомая памылка - code.google.com/p/chromium/ пытанні/дэталі? ID = 20574
дададзена аўтар Adrift, крыніца
Я згодны, нягледзячы на ​​большасць людзей, якія любяць WebKit больш за ўсё, гэта, вядома, мае сваю справядлівую долю дзівацтваў. Гэта адзін з <�я> шмат </я> я сутыкаўся ..
дададзена аўтар Adrift, крыніца
Я згодны, нягледзячы на ​​большасць людзей, якія любяць WebKit больш за ўсё, гэта, вядома, мае сваю справядлівую долю дзівацтваў. Гэта адзін з <�я> шмат </я> я сутыкаўся ..
дададзена аўтар Adrift, крыніца
Я згодны, нягледзячы на ​​большасць людзей, якія любяць WebKit больш за ўсё, гэта, вядома, мае сваю справядлівую долю дзівацтваў. Гэта адзін з <�я> шмат </я> я сутыкаўся ..
дададзена аўтар Adrift, крыніца
Яго, мабыць, вядомая памылка - code.google.com/p/chromium/ пытанні/дэталі? ID = 20574
дададзена аўтар Adrift, крыніца
Такім чынам, відавочна, што гэта не памылка, проста WebKit вынікаючы правілам. Тое, што я спрабую дамагчыся не была цалкам вызначана ў W3C спецыфікацыі яшчэ. См гэтую тэма
дададзена аўтар mattm, крыніца
Такім чынам, відавочна, што гэта не памылка, проста WebKit вынікаючы правілам. Тое, што я спрабую дамагчыся не была цалкам вызначана ў W3C спецыфікацыі яшчэ. См гэтую тэма
дададзена аўтар mattm, крыніца
Такім чынам, відавочна, што гэта не памылка, проста WebKit вынікаючы правілам. Тое, што я спрабую дамагчыся не была цалкам вызначана ў W3C спецыфікацыі яшчэ. См гэтую тэма
дададзена аўтар mattm, крыніца
Дзякуй за спасылку. Ганьба WebKit мае такую ​​непрыемную і непатрэбную памылку.
дададзена аўтар mattm, крыніца
Дзякуй за спасылку. Ганьба WebKit мае такую ​​непрыемную і непатрэбную памылку.
дададзена аўтар mattm, крыніца

8 адказы

У мяне была такая ж праблема, толькі ў Chrome. Гэта было маё рашэнне:

// run JS if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
   //set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

   //move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  
4
дададзена

У мяне была такая ж праблема, толькі ў Chrome. Гэта было маё рашэнне:

// run JS if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
   //set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

   //move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  
4
дададзена

Паспрабуйце адключыць процілеглая бок-бачнасць на свой аніміраваны элемент і яго бацькоў.

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
3
дададзена
Так, гэта нічога для мяне не зрабіць што-небудзь. Цікаўны пра абставіны, у якіх даданне гэтага рэквізіту дапаможа што-небудзь
дададзена аўтар Amalgovinus, крыніца
Не вырашае яго ў Chrome 31 на Mac.
дададзена аўтар Jayden Lawson, крыніца
Працаваў для мяне, калі я дадаў адсеў-бачнасць схаваную таксама да анімацыі элементу кантэйнера з устаноўкай перспектывы. Але гэта WebKit ehaviour сапраўды раздражняе.
дададзена аўтар actimel, крыніца

Паспрабуйце адключыць процілеглая бок-бачнасць на свой аніміраваны элемент і яго бацькоў.

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
3
дададзена
Так, гэта нічога для мяне не зрабіць што-небудзь. Цікаўны пра абставіны, у якіх даданне гэтага рэквізіту дапаможа што-небудзь
дададзена аўтар Amalgovinus, крыніца
Не вырашае яго ў Chrome 31 на Mac.
дададзена аўтар Jayden Lawson, крыніца
Працаваў для мяне, калі я дадаў адсеў-бачнасць схаваную таксама да анімацыі элементу кантэйнера з устаноўкай перспектывы. Але гэта WebKit ehaviour сапраўды раздражняе.
дададзена аўтар actimel, крыніца

Паспрабуйце адключыць процілеглая бок-бачнасць на свой аніміраваны элемент і яго бацькоў.

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
3
дададзена
Так, гэта нічога для мяне не зрабіць што-небудзь. Цікаўны пра абставіны, у якіх даданне гэтага рэквізіту дапаможа што-небудзь
дададзена аўтар Amalgovinus, крыніца
Не вырашае яго ў Chrome 31 на Mac.
дададзена аўтар Jayden Lawson, крыніца
Працаваў для мяне, калі я дадаў адсеў-бачнасць схаваную таксама да анімацыі элементу кантэйнера з устаноўкай перспектывы. Але гэта WebKit ehaviour сапраўды раздражняе.
дададзена аўтар actimel, крыніца

Мой сайт быў з той жа праблемай: Google Translator штурхнуў змесціва старонкі ўніз, але не фонавы малюнак цела. Гэта, як я вырашыў гэта:

Я проста дадаў новы пусты DIV з фонавым малюнкам

 <div class="BackgroundImageBody></div>

This is the CSS

.BackgroundImageBody{
background: url('/WebRoot/Store/Shops/3077-120214/MediaGallery/design/fundo.jpg') repeat scroll 0% 0% #FFF !important;
height: 100%;
width: 100%;
position: absolute;
}

Then I appended the div to the Google translator div with a JavaScript $.ready(function()

<script type="text/javascript">
// 


</script>

You can see this working at http://www.photostation.pt/ Hope this was useful.

Andreas ([email protected])

1
дададзена

Мой сайт быў з той жа праблемай: Google Translator штурхнуў змесціва старонкі ўніз, але не фонавы малюнак цела. Гэта, як я вырашыў гэта:

Я проста дадаў новы пусты DIV з фонавым малюнкам

 <div class="BackgroundImageBody></div>

This is the CSS

.BackgroundImageBody{
background: url('/WebRoot/Store/Shops/3077-120214/MediaGallery/design/fundo.jpg') repeat scroll 0% 0% #FFF !important;
height: 100%;
width: 100%;
position: absolute;
}

Then I appended the div to the Google translator div with a JavaScript $.ready(function()

<script type="text/javascript">
// 


</script>

You can see this working at http://www.photostation.pt/ Hope this was useful.

Andreas ([email protected])

1
дададзена

Мой сайт быў з той жа праблемай: Google Translator штурхнуў змесціва старонкі ўніз, але не фонавы малюнак цела. Гэта, як я вырашыў гэта:

Я проста дадаў новы пусты DIV з фонавым малюнкам

 <div class="BackgroundImageBody></div>

This is the CSS

.BackgroundImageBody{
background: url('/WebRoot/Store/Shops/3077-120214/MediaGallery/design/fundo.jpg') repeat scroll 0% 0% #FFF !important;
height: 100%;
width: 100%;
position: absolute;
}

Then I appended the div to the Google translator div with a JavaScript $.ready(function()

<script type="text/javascript">
// 


</script>

You can see this working at http://www.photostation.pt/ Hope this was useful.

Andreas ([email protected])

1
дададзена