Good day,

I can not figure out why when viewing a site through a tablet / phone, horizontal lines appear above and below the background image.

enter image description here

background:url('/images/cutheader.png') repeat-x top, #FAEBD7 url('/images/cutfooter.png') repeat-x bottom; At the same time, there is no such problem on a PC in any browser.

Here is the site to emulate the mapping via IOS: Website This is the website with the problem: Website

The strips are visible immediately under the header and in the footer.

To make the example work, scale it up to 200% ctrl + Mouse wheel in chrome.

 .head { background-color:red; } .body { padding: 15px 5px; background: url('http://geassnovels.ru/images/cutheader.png') repeat-x top, #FAEBD7 url('/images/cutfooter.png') repeat-x bottom; flex-grow: 1; -webkit-background-size: 11px 11px; } 
 <div class='head'> Hello </div> <div class='body'> </div>

  • header { margin-bottom: -1px;} - HamSter
  • Nothing has changed ... - enhaster
  • Are you looking through the emulator? With pc everything is OK ... - enhaster
  • Through the emulator, what's this bar is only if the scale is set to more than 100% - HamSter
  • 2
    so remove the background-size and the lines disappear. Do not drag the background disproportionately, make the pictures 2x and 30 * 16 and then background-size: 15 * 8 - Artem Gorlachev

3 answers 3

This is a mowing emulator, check in the Chrome inspector. The device is fine, in the xcode emulator too

! [iPhone ] 1 [ iPad ] 2 [ iPad ] 3

  • Damn, I now have at hand a tablet and a phone on an android with chrome. Both there and there these lines :( Perhaps tablets with ios normally display ... - enhaster
  • one
    Weird. On the desktop in chrome without a bug s008.radikal.ru/i306/1610/06/f0a249cd3289.jpg Make a background for the triangle then retine, cut it under the retina and add rules. MB will help. - Anton Essential
  • Thanks, I'll try now. On the tablet, only in firefox it is normally displayed, but some square images become as if the quality has been reduced. Then otpishu. - enhaster
  • I was able to repeat the problem in a regular browser, reducing the size of the image with: -webkit-background-size: 11px 11px; With svg so much hassle, is there really no other way? - enhaster
  • one
    Make an image under the retina. egorkhmelev.imtqy.com/retina Cut the image larger, then write the rule and specify the default size of the one that needs to be displayed. habrahabr.ru/post/150071 habrahabr.ru/post/150071 The quality is low due to the fact that the ratio of pixels is different, on iOS devices the pixel density is greater, so do the image in width and height 2 times more, well, then as I then wrote the rules for this image - Anton Essential

This is not a browser glitch, this is the wrong pavil.

 .body { background: url('../images/defaultIMAGE.png') repeat-x top, #FAEBD7 url('../images/defaultIMAGE.png') repeat-x bottom; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .body { background: url('../images/retinaIMAGE-2x.png') repeat-x top, #FAEBD7 url('../images/retinaIMAGE-2x.png') repeat-x bottom; -webkit-background-size: 30px 15px; -moz-background-size: 30px 15px; background-size: 30px 15px; } }

Or by default, put a large image, for example, 60px at 30px and in the background-size register 30px at 15px, the rule for mobile devices

 .body { background: url('../images/retinaIMAGE-2x.png') repeat-x top, #FAEBD7 url('../images/retinaIMAGE-2x.png') repeat-x bottom; background-size: 30px 15px; } @media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolution:192dpi), only screen and (min-resolution:2dppx){ .body { background-size: 30px 15px; } }
  • one
    all the same for such pictures you have css heavier than 2x picture comes out and a bunch of noodles. And this is not a browser glitch, yes, this is a feature of its resize, it makes a pattern with repetition because of what lines appear at non-detailed height. - Artem Gorlachev
  • I tried to reduce - it does not work, I’m sitting now damn I am drawing SVG :) and I also tried the media - enhaster
  • Funny, I increased the width by 1px, a strip appeared on the PC (very hard to see, take a closer look): geassnovels.ru - enhaster
  • one
    @enhaster, you are now in Photoshop just simulated how the chrome resize works. - Artem Gorlachev
  • not only chrome, one firefox smoged into an image :( It's bad that reducing a larger image doesn't work as you advised :( - enhaster

There were 2 problems: 1) margin-bottom: -1px; in the links (css) 2) resize curve (decided to use SVG)

  • You had a curve resize first in the browser, then you crookedly zarazayzili in Photoshop; ) - Artem Gorlachev