Open Bug 1081494 Opened 5 years ago Updated Last month

Tumblr photosets pan when they shouldn't and are positioned offset

Categories

(Web Compatibility :: Mobile, defect, P3)

Firefox 32
Other
Android
defect

Tracking

(Not tracked)

People

(Reporter: the.decryptor, Unassigned)

References

(Depends on 1 open bug, )

Details

(Keywords: webcompat:site-wait, Whiteboard: [sitewait] [country-all] [css] [platform-rel-Tumblr])

Attachments

(2 files)

User Agent: Mozilla/5.0 (Android; Mobile; rv:32.0) Gecko/32.0 Firefox/32.0
Build ID: 20140923174357

Steps to reproduce:

This is similar to Bug 943206, photosets on Tumblr are embedded into posts using an iframe that shouldn't be able to be panned, but Firefox for Android does allow panning them. The iframe contents are also positioned incorrectly, offset vertically by about half their height.

This page shows it for me, but I've found any photoset will be effected. Chrome doesn't have this issue.

http://teapalm.tumblr.com/post/99332024799


Actual results:

Images are offset within their iframe and clipped, and are able to be panned


Expected results:

Images are displayed fully within their designated area, and attempting to pan them should have no effect.
Status: UNCONFIRMED → NEW
Ever confirmed: true
There's two problems here.

One is the positioning issue, which is a problem with the website. They're serving different content to Firefox for Android than they are to Firefox for Desktop. With the UA switcher addon on desktop I see the same mispositioning there.

The second is the scrolling issue. On desktop the website sets three things: (1) overflow:hidden on the iframe, (2) scrolling="no" on the iframe, and (3) overflow:hidden on the iframe's body element. On mobile the website only does (1) and (2). (1) has no effect in Firefox, either on desktop or on mobile. (2) and (3) have an effect on desktop. (3) has an effect on mobile. So basically, the scrolling happens both because the website is skipping overflow:hidden on the iframe's body for mobile, and also because Fennec doesn't support scrolling="no" on the iframe.

We should definitely add support for scrolling="no" (bug 740341), but the rest is tech evangelism.
Component: Graphics, Panning and Zooming → Mobile
Product: Firefox for Android → Tech Evangelism
Whiteboard: [contactready] [country-all]
Interesting bug. There's something else happening.
1. Fake the UA to be Firefox Android on Firefox Desktop.
2. Go to http://teapalm.tumblr.com/post/99332024799
3. Open Web Developer tools / Inspector
4. Go to #photoset_99332024799
5. Explore the iframe

Inside the iframe, 
http://teapalm.tumblr.com/post/99332024799/photoset_iframe/teapalm/tumblr_nd1bu3rtGP1qdblie/0/false

there is this markup:

<div id="photoset_99332024799" 
     data-parent-ref="photoset_iframe_99332024799" 
     class="photoset" 
     style="clear: both; margin-bottom: 0px; transform: scale(0.49);">

Removing the transform scale stop the resizing of the image and the top space.
The transform really screws the general layout. Its value depends on the size of the iframe.

Then inside this div, there are 3 divs which are basically a sequence of 

   div a img

On the div.photoset_row, there is a style attribute, remove the values.

<div class="photoset_row" 
     style="height:520px; width:700px;">

     <a href="link_to_the_image.jpg" 
        data-photoset-index="1" 
        data-src="link_to_the_image.jpg" 
        class="photoset_photo" 
        id="photoset_link_99332024799_1">


Then finally on the image, replace "width: 700px" with "max-width:100%;"

        <img style="width:700px;" 
             src="link_to_the_image.jpg" 
             alt="">
        </a>
     </div>


The scale seems to be controlled by 

    function scale() {
        var width = window.innerWith || Math.max(document.documentElement.clientWidth, document.body.clientWidth);
        var scale = (width/photoset_width).toFixed(2);
        var height;

        if(currentWidth === undefined || currentWidth !== width) {
            if(scale < 1) {
                photoset.style.MozTransform = "scale("+(width/photoset_width).toFixed(2)+")";
                photoset.style.zoom = (width/photoset_width).toFixed(2);
            } else {
                photoset.style.MozTransform = "scale(1)";
                photoset.style.zoom = 1;
            }
            
            // send height to parent window
            if(window.parent) {
                height = (scale < 1) ? Math.round(photoset.offsetHeight*scale) : photoset.offsetHeight;
                //TODO: Fix SSL requirement here
                window.parent.postMessage('resize_photoset_iframe;'+photoset_id+';'+height, 'http://'+domain);
            }
            
            currentWidth = width;               
        }
    }

    scale();
    window.onresize = scale;


In the http://assets.tumblr.com/assets/scripts/mobile_handset/mh_photoset_combined.js?_v=71b31db09aa9ad498d8fb73f7924ea30

We get a bit of UA sniffing too, with

     this.fennec = /Fennec/i.test(this.ua);
      this.mozilla = /mozilla/i.test(this.ua) && !/(compatible|webkit)/.test(this.ua);

but it doesn't seem to have effect for the fennec part. 
I haven't dig in the rest of the script.
Whiteboard: [contactready] [country-all] → [contactready] [country-all] [css]
platform-rel: --- → ?
Whiteboard: [contactready] [country-all] [css] → [contactready] [country-all] [css] [platform-rel-Tumblr]
platform-rel: ? → ---
The panning portion of this bug is fixed now.
Priority: -- → P3
@Karl can you continue your investigation on this?

[Note:]
It looks like https://zen-themes.com/ designed the site.
Flags: needinfo?(kdubost)
First of all, a screenshot.
The image is below in Firefox.

In Firefox Mobile we receive:


<div id="photoset_99332024799" 
     data-parent-ref="photoset_iframe_99332024799" 
     class="photoset" 
     style="clear: both; 
            margin-bottom: 0px; 
            transform: scale(0.51);">

In Chrome Mobile, we receive:

<div id="photoset_99332024799" 
     data-parent-ref="photoset_iframe_99332024799" 
     class="photoset" 
     style="margin-bottom: 0px; 
            zoom: 0.51;">

So the Chrome version relies on zoom.
which makes it a duplicate of Bug 390936


But it can be fixed on Firefox. :)

There is a missing transform-origin: 0 0

<div id="photoset_99332024799" 
     data-parent-ref="photoset_iframe_99332024799" 
     class="photoset" 
     style="clear: both; 
            margin-bottom: 0px; 
            transform: scale(0.51); 
            transform-origin: 0 0">


Adding it fixes the issue.
Flags: needinfo?(kdubost)
Once we added transform-origin: 0 0
Contacted on the partner mailing-list.
Depends on: csszoom
Whiteboard: [contactready] [country-all] [css] [platform-rel-Tumblr] → [sitewait] [country-all] [css] [platform-rel-Tumblr]
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Duplicate of this bug: 1571557

I contacted them again today.

The current version of the code is

a = o.extend({
  name: 'PhotosetIframe',
  initialize: function (t) {
    var e = this;
    this.options = i.extend({
    }, this.defaults, t);
    var n = this.data.photoset_photos;
    this.photoset_width = this.data.shadow ? this.data.width + 20 : this.data.width,
    this.photoset = r('#photoset_' + this.data.post_id),
    window.onresize = function () {
      e.scale()
    },
    s.bool('is_mobile') || r('.photoset_photo').on('click', function () {
      return window.parent.Tumblr.Lightbox.init(n, r(this).data('photoset-index')),
      !1
    }),
    this.scale()
  },
  scale: function t() {
    var e,
    n = window.innerWith || Math.max(document.documentElement.clientWidth, document.body.clientWidth),
    t = (n / this.photoset_width).toFixed(2);
    if ('undefined' == typeof this.currentWidth || this.currentWidth !== n) {
      if (t < 1) {
        var r = (n / this.photoset_width).toFixed(2);
        this.photoset.css({
          zoom: r,
          '-moz-transform': 'scale(' + r + ')'
        })
      } else this.photoset.css({
        zoom: 1,
        '-moz-transform': 'scale(1)'
      });
      window.parent && (e = t < 1 ? Math.round(this.photoset.outerHeight() * t)  : this.photoset.outerHeight(), window.parent.postMessage('resize_photoset_iframe;' + this.data.post_id + ';' + e, '*')),
      this.currentWidth = n
    }
  }
});

in https://assets.tumblr.com/client/prod/standalone/photoset-iframe/index.build.js?_v=209392fcebeb03c80e519d648f406459

They are missing the transform-origin: 0 0.

You need to log in before you can comment on or make changes to this bug.