jeudi 23 juin 2016

iPhone single pixel offset with exact pixel sizing

I am seeing an issue starting the last few weeks on our sites using Google DFP for ads, when viewed on an iPhone 6 on 9.3.2. My own iPhone 5s on 8.3 does not reproduce this issue. The html of the ad containers is like so: <div id="ad_mrec_mobile_1" class="ad" style="width:300; height:auto"></div> and DFP is called like so: SLOTS['ad_mrec_mobile_1'] = googletag.defineSlot('/' + dfp_id + '/Mobile_300x250_1', [300, 250], 'ad_mrec_mobile_1').addService(googletag.pubads()); googletag.pubads().enableAsyncRendering(); googletag.enableServices(); // ... Later ... googletag.cmd.push(function(){ googletag.display('ad_mrec_mobile_1'); }); The only relevant CSS is this: .ad { margin: 0 auto; width: 300px; height: auto; background: #ec008c; } When loaded on the affected device, we see a single pixel strip of pink (the background of .ad) appear on the left of the ad. I'm aware of subpixel rendering issues with safari when we are using percentage or decimal pixel layouts, however in this case we are looking at values of exactly 300px. In connecting the affected device to the safari inspector, I can confirm that the .ad container, the iFrame loaded in by DFP, and the image loaded inside the iFrame are all 300 wide. The website in which these are found uses <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> Is there a known cause for this (and maybe a known solution)? Is my belief that the general subpixel rendering issues would not apply when providing exact pixel sizes just wrong?

Aucun commentaire:

Enregistrer un commentaire