2

Weird problem: I'm working on a bootstrap responsive site, and using the Chrome Developer Tools Device Emulator to see how things look. Unfortunately, what I see on Chrome Devtools doesn't look at all like what I see on an actual mobile phone.

iPhone5 screen shot

For some reason, my background images aren't propagating correctly. The defect is noted on four of the five slides on that home page. 

<div id="slide-2m" class="gf_mobile" style=" height: 100%; margin: 0 auto; 
            overflow: hidden; background-color: white;
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/oranges_mobile.png);
            background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; padding: 40px 0;" >
    <div style="height: 100%; overflow: hidden; margin-top: 20%;" >
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/who_we_are_text_883x862.png" style="width: auto; height: 55vh;">
    </div>
    <div style="height: 100%; overflow: hidden; margin-top: -300px;">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/sqf_logo_883x862.png" style="width: auto; height: 55vh; ">
    </div>
</div>

Hmm.. I'm wondering if its either the use of vh (view port units?) or perhaps the dual use of background-color: white; and background-image: (I'm using a .png with transparent background, so I need the white in there.) ?

So the obvious question is, why doesn't the emulator accurately match the actual mobile device? Is that a bug in the Chrome Developer Tools?

AAAAAaarggh! I just tested the same site with a Samsung Galaxy S5 with Chrome browser, and it looks same as the Chrome Browser Emulator. Perfect! So... does that mean Chrome error'd in the details of its iPhone simulator (or ... is Apple at fault here?)

Note: And yes, I'm aware of the issues involving mobile (visual viewport vs layout viewport) ref: A Tale of Two Viewports.

I'm going to attempt to convert all vh's and vw's over to pixels and then retest. But I'm still baffled why the difference in the emulator. Again, should this be a bug submission, and to whom.. Apple or Chrome folks?

Update: I'm working on converting all VW and VH's to pixels but so far on a screen by screen basis, that is a fail. I'm really thinking this has something to do with CSS and background-size and background-location. Look at the background image on this slide, emulator vs iphone.

Second screen image

<div id="slide-4m"  class="gf_mobile" style=" height: 100%; margin: 0 auto; overflow: 
            hidden; background-color: white;
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/farm_field_1018x474.jpg);
            background-repeat: no-repeat; background-position: center center; background-attachment: fixed; 
            background-size: cover; padding: 40px 0;" >

One more thing I just now noticed: I've set up background-attachment: fixed; and that's how they work on the emulator. On the Samsung, I can see the backgrounds on all the five slides but they DO SCROLL. On the iPhone, I can't see the background on most of the slides. The whole thing is odd.

Oops: Background-fixed, not so hot on mobile...

Community
  • 1
  • 1
zipzit
  • 3,778
  • 4
  • 35
  • 63

2 Answers2

2

Ugh. The answer is to not use background-attachment: fixed; for mobile.

ref: How to replicate background-attachment fixed on iOS and Fixed background image with ios7

Hmmm.. Should the dev tools emulator help you on that topic? Should that be a suggested feature to Google Chrome team?

Community
  • 1
  • 1
zipzit
  • 3,778
  • 4
  • 35
  • 63
  • 1
    I don't think Chrome can really simulate all the quirks. I suggest using the iOS Simulator that comes with Xcode to test for iPhones, the version of Safari that comes with it pretty much simulates all the issues. You will still also have to test on a real device as well as some stuff isn't simulated (like the memory limits). – thomasfuchs Jul 19 '15 at 22:22
1

Safari on the iPhone has certain size limits for images (JPG up to 32 megapixels, GIF/PNG 3-5 megapixels depending on device).

Can you try using a different, smaller (in resolution) image for the background image?

thomasfuchs
  • 5,386
  • 2
  • 18
  • 38
  • I can try that. oranges_mobile.png is 640K large, 768 x 823 pixels. There isn't a single image on the page larger than 2 Meg's, although there are a lot of 'em.. all within a `display: none;` wrapper. I will say, there is one odd thing. I'm using Chrome on iphone. I have an add on tool that I used to use for troubleshooting. It displays browser size and browser id.. on the iphone with Chrome browser, it displays "safari" Is that some of compromise Google and Apple have to enable the chrome browser in the iphone? – zipzit Jul 19 '15 at 18:00
  • It might be the number of images then, there's also limits to the total amount. And yes, Chrome on iPhone uses Safari's rendering engine (contractual obligation of the App Store). – thomasfuchs Jul 19 '15 at 18:40