0

Screenshot attached - https://i.imgur.com/YI27IZa.png

3 images, with 100% width under each other.

Grabbing code below, where images can be any random images for example of 800px x 1000px size . This will show 3 images under each other, opening up F12 chrome console switching to mobile mode, then grabbing edge and changing screen width slightly will randomly show 1px black gap between images (container background is black). I expected this to be because of "subpixel rendering" or float numbers in height/width of image which are calculated when I change screen resolution. Result of this is that on random mobile phones iphone or android depending on screen resolution there are appearing 1px gaps between these images.

I find it impossible to remove these gaps, be it object fit / flex / grid / display block / border box, I tried almost anything. What worked was to put margin-bottom: -1px . This removed gaps but, these images are sliced images of larger image, and when I do margin-bottom: -1px they do not match perfectly anymore. I tried to raise height of images manually by 1px or 2px it worked literally randomly so could not figure out any kind of JS script.

body {
  margin: 0;
  padding: 0;
}

#imageContainer {
  background: black;
}

.imageWrapper img {
  width: 100%;
  display: block;
}
<div id="imageContainer">
  <div class="imageWrapper">
    <img src="https://placehold.co/600x400/0bf/fff?text=1" alt="Image 1">
  </div>
  <div class="imageWrapper">
    <img src="https://placehold.co/600x400/f0b/fff?text=2" alt="Image 2">
  </div>
  <div class="imageWrapper">
    <img src="https://placehold.co/600x400/bf0/fff?text=3" alt="Image 3">
  </div>
</div>

UPDATE : Example video - https://www.youtube.com/watch?v=r_Y6GwDIsiQ Thanks to comments this seems to be related to pagezoom, and can be simulated also on android phones by doing any kind of zoom. What is intriguing is as shown on the video, iframe on stackowerflow is immune to this, was not able figure out why.

Jiro Matchonson
  • 875
  • 1
  • 17
  • 24
  • Have you tried to set `vertical-align: top;` or `display: inline-block;` or `block` to the `img` ? Also, can you make sure your page zoom level is at 100%? – Roko C. Buljan Aug 02 '23 at 16:15
  • Hi, I attached screenshot, also added display block to images in code. But seems some mod closed my question and pointed me to different question which is different topic, not sure what to do about that . – Jiro Matchonson Aug 02 '23 at 16:21
  • Are you 100% sure you're not using perhaps `.png` images with a casually embedded translucent edge? Any specific browser maybe? – Roko C. Buljan Aug 02 '23 at 16:28
  • I use .jpg, edited question and attached screenshots. Its just ok on some resolution and apear at another resolution. I am testing in chrome debugger, but got info that these gaps apear on iphone (also in screenshot) but its like not browser related but current device resolution related. I tried chrome debuger at some random pages with galleries like this and to my supprise they have same issue. – Jiro Matchonson Aug 02 '23 at 16:31
  • Cannot seem to replicate on Windows 11, Chrome and Firefox... – Roko C. Buljan Aug 02 '23 at 16:32
  • Did You try in chrome debugger, switch to mobile , drag edge to change width and watch gaps appear/dissapear ? – Jiro Matchonson Aug 02 '23 at 16:33
  • Yes I did. Chrome Dev tools, Mobile, Dimensions: Responsive. Resized slowly and steadily. There's no dark lines (the parent background color) appearing – Roko C. Buljan Aug 02 '23 at 16:35
  • Mod edited my example so it works now. He also added generated images to it. When I run that by "run code snipett" I could not reproduce, but when I inspected code, copied html of iframe and put it in blank chrome tab, I could reproduce https://i.imgur.com/SagtoEd.png , (I replaced all images with blue one) . So that iframe example keeps answer to this maybe some headers above iframe – Jiro Matchonson Aug 02 '23 at 16:57
  • 1
    Are you sure your page's zoom level at exactly 100%? Your dev tools Mobile view seems to be at 50%. Might be that's the cause of the incorrect scaling and spacing between elements. – Roko C. Buljan Aug 02 '23 at 22:07
  • Hi there, I just made an video - https://youtu.be/r_Y6GwDIsiQ Its esspecially interesting because issue is not present in stackowerflow iframe, but when I take it out issue returns, even if it is just next to stackowerflow iframe. I even tried to make iframe on my page but it still had gaps. Then I copied that to owerflov page and gaps are gone. Stack overflow must have some special css upon iframe that do this magic. Am bit obssesed since I see right result but sadly unable to tell why. – Jiro Matchonson Aug 02 '23 at 22:11
  • Roko C. Buljan - I missed its on 50%, because it jumps itself when I move width pixels. But for this exact example which is in post, gaps remained (for images test on my page results got much better, but luckily this example has gaps even on 100%, luckily because if that would be cause I would have no leads for Iphone behavior) – Jiro Matchonson Aug 02 '23 at 22:31
  • I take it back, for chrome debugger setting 100% zoom seem to solve issue (gap only visible at extremelly small size (150px)) . Which leaves Iphone, is it possible that Iphone user has this zoom different to 100% ? – Jiro Matchonson Aug 02 '23 at 22:58
  • Hard to tell (since have not iOS to test on). And frankly I would not care if something is quirky on Safari, or on zoomed up/down pages - specially something of such (minor) importance. – Roko C. Buljan Aug 02 '23 at 23:16
  • Well half of visitors are on iphone, not sure if iphone has some zoom up by default. I had not seen issues in my android phone, but now when know where to look, if I zoom up a bit gaps will appear also on android. What is interesting is that as on the video above than also on my android thi question example in stackowerflow iframe is immune to this, even when zooming on my phone. Why :?O – Jiro Matchonson Aug 03 '23 at 11:51
  • 1
    _"This removed gaps but, these images are sliced images of larger image, and when I do margin-bottom: -1px they do not match perfectly anymore."_ - what happens if you try a bit _less_ - `margin-bottom: -.5px`, or maybe even `margin-bottom: -.25px`? Perhaps you'll manage find a combination where it can "counter-act" the effect, without totally ruining the view in those instances where it doesn't show to begin with. – CBroe Aug 03 '23 at 12:25
  • @CBroe yes worth trying suggestion, but if I recall well,.. you can then fight those fractions ad absurdum in the search for the less shitty one... Anyways, worth trying. – Roko C. Buljan Aug 03 '23 at 13:36
  • @CBroe tnx for advice, actually I tried that one already, it will remove some gaps but not all also tried 0.6 0.24, its kinda random. But this is for chrome debugger with zoom at 50% or 125% . I am not sure if this is equivalent testing for iphone case, but resulting bug is at least very simillar. Asked friend for his safari zoom setting on iphone and it is 100% but he still see the gap . But will ask if 0.5px make for any difference on iphone (also do not have one) – Jiro Matchonson Aug 03 '23 at 14:49
  • I debuged stackowerflow iframe, and got to point where if container above iframe has "display: flex;flex-direction: column;" , images inside iframe have no gaps when zoomed in chrome debugger. But this work only for iframe and not for div, its kind of interesting but has no use. Not gonna put gallery into iframe and then calulate its height :-) . – Jiro Matchonson Aug 04 '23 at 14:30

0 Answers0