All geek questions in one place

Background image does not display correctly in iOS

I am using a background image on a website. The site looks great in all desktop browsers, but when I browse the site on my iPad Mini (running iOS 6.1.3), the background image has stripes in it. You can see the template on most pages, which is a line (the size of the background image) that looks great, then another line with the same size of the background image, etc.

Here is a screenshot showing the problems:

iPad Error Screenshot

Here is the CSS needed for the background:

#wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(/images/bgs/parchment2.jpg); }

I tried to clear the iPad cache, but that didn't work. I am at a loss why this is happening. How to prevent and solve this problem?

Update

I created jsFiddle wrappers. It looked good on the website. Therefore, I can only assume that this is somewhere in my code. However, this does not always happen immediately on the site. This can happen with Fiddle, but I have not seen it. If this is my site, how can I track the code causing the problem?

Update 2

I changed the background image to html, body tags, and the problem is still happening, but it’s not so bad and it will be cleaned of it. I still wonder how I prevent all this.

Update 3

I tried @Riskbreaker's idea of ​​switching to PNG. This did not work. I still see the lines. He also significantly increased the background file (from 30 thousand to almost 200 thousand). I also tried a completely different background image, thinking it might be the image itself, but I still saw the error. I switched to jpg for file size considerations.

How to solve this problem? Is this an iOS problem or something in my code?

This site is http://www.lfrieling.com/ . I only see this on my iPad Mini running iOS 6.1.3 (the latter at the time of this writing). I do not see this on my iPhone running the same version of iOS. You can also see this on longer pages more than on other pages. See Professional> Resources.

+6
source share
6 answers

Have you tried hardware acceleration? Add -webkit-transform: translateZ(0); besides css like adding background. This is my guess, because it is a rendering problem, and hardware acceleration fixes rendering problems when using css transitions in Chrome.

 #wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(/images/bgs/parchment2.jpg); -webkit-transform: translateZ(0); }

Or maybe try showing retina images for devices that support them using media queries?

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #wrap { background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg); } }

Source of media queries *

To solve rendering problems you can try adding -webkit-transform: translateZ(0); to other tags that also wrap content on the page. This can prevent loading / display problems.

+4
source

Linda First of all, this is a good site. Secondly, you should take these two tips into account:

That's all I think that helped you.

0
source

Try adding -webkit-background-size to the body tag:

 body { -webkit-background-size: 512px 512px; }
0
source

Try this, it can help you. Add overflow: hidden; height: 1%; overflow: hidden; height: 1%; to your #wrap .

0
source

Have you tried background: #B3B1B2 url(/images/bgs/parchment2.jpg) repeat; . Not sure if this will solve the problem and I don't have an iPad for testing, but it's worth a try.

0
source

Try if this helps,

after adding repeat to #wrap ,

and add overflow:auto; at .height

since the size of the image is 512x512 and the height is 2000.

updated fiddle

I'm not sure if this will work, but the problem is that the internal image does not allow the background to be displayed correctly,

FYI: -webkit-transform: uses gpu, so if the device does not support gpu, you will also encounter a problem.

Hope this will be done.

0
source

Source: https://habr.com/ru/post/945985/

More articles:


All Articles