背景附件：固定+背景尺寸：在iPad上覆盖？

Question

I have some block with height 100%, and which scrolles down by single mouse wheel (I do it with mousewheel.js). In that block I have 2 other blocks with height and width 100%, and with background images which changes with fade effect. I set background-size: cover and background-attachment: fixed for this blocks. Its working fine on desktop browsers. But on IPad I have some issues:

.first-block {
background-size: cover;
background-attachment: fixed;
position: absolute;
-webkit-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
top: 0;
}

1. fixed and cover together dont work, images is too zoomed.. I decided to set background-attachment: scroll and emulate background-attachment: fixed with jQuery adding this code

    $(window).scroll(function() { var scrolledY = $(window).scrollTop(); $('.first-block').css('background-position', 'center ' + ((scrolledY)) + 'px'); }); 

Its working fine, but on Ipad and Safari (Mac OS) its work too slow.. Its almost crash browser..

When I change orientation of display in Ipad - background dont reconstructed for each orientation. Its display img size only first orientation.

I have read many many similar questions here, but I cant find the better solution for me. Please see JsFiddle demos.

DEMO with FIXED

DEMO with emulating FIXED with jQuery

Thanks for any help.

Answer 1

I'm not exactly an expert when it comes to understanding many scripts, but what I can tell you will pretty much solve your issue entirely. When you use scripts such as mousewheel.js, you're going to find out that handheld devices and tablets will react quite a bit differently than desktop browsers would.

As far as the lag you're experiencing, that's probably due to the limitation of the device its on. I'm sure that if you were to try it on other tablets, you'd find similar results to this. Your best solution is optimizing your website using media queries so you can ensure that although most users will have the experience you're intending, tablet users can still access needed information and the essential site functionality.

Things like:

@media (min-width: 700px) and (orientation: landscape) { ... }

and:

@media (min-width: 700px) { ... }

will let you code CSS specific to those conditions in CSS. You can find a resource here:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

I also suggest that if you're looking to keep what you wanted, then I'd take a look into experimenting with other JS files that do the same thing.

Sorry if what I provided doesn't give you the exact solution you need.