Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alphynix.tumblr.com - The image is cropped #41889

Closed
webcompat-bot opened this issue Oct 9, 2019 · 6 comments
Closed

alphynix.tumblr.com - The image is cropped #41889

webcompat-bot opened this issue Oct 9, 2019 · 6 comments

Comments

@webcompat-bot
Copy link

@webcompat-bot webcompat-bot commented Oct 9, 2019

URL: https://alphynix.tumblr.com/

Browser / Version: Firefox Mobile 71.0
Operating System: Android
Tested Another Browser: Yes

Problem type: Design is broken
Description: images are broken
Steps to Reproduce:

Browser Configuration
  • None

From webcompat.com with ❤️

@webcompat-bot webcompat-bot added this to the needstriage milestone Oct 9, 2019
@cipriansv cipriansv changed the title alphynix.tumblr.com - design is broken alphynix.tumblr.com - The image is cropped Oct 14, 2019
@cipriansv cipriansv modified the milestones: needstriage, needsdiagnosis Oct 14, 2019
@cipriansv

This comment has been minimized.

Copy link

@cipriansv cipriansv commented Oct 14, 2019

Thanks for the report,
I was indeed able to reproduce the issue. The image is cropped.

Tested with:
Browser / Version: Firefox Focus 8.0.22 , Chrome Mobile 77.0.3865.116
Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Focus:

image

And this is the web page displayed in Chrome:

image

The issue is also reproducible on Firefox Preview Nightly 191010(🦎: 71.0a1-20191004094656).

@wisniewskit

This comment has been minimized.

Copy link
Member

@wisniewskit wisniewskit commented Oct 18, 2019

In Chrome, the iframe showing that scorpion has this div in it:

<div id="photoset_188304055232" data-parent-ref="photoset_iframe_188304055232" class="photoset" style="margin-bottom: 0px; zoom: 0.67;">
  <!-- snip! the actual image is inside here -->
</div>

Note the zoom:0.67. In Firefox, this is the CSS:

<div id="photoset_188304055232" data-parent-ref="photoset_iframe_188304055232" class="photoset" style="margin-bottom: 0px; transform: scale(0.67);">
  <!-- snip! the actual image is inside here -->
</div>

Note they use transform without setting a transform-origin. If I add one, then things look fine:

transform-origin: 0 0;

That makes this yet another case of bz390936.

This seems to be being applied in this script:

  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
    }

I don't understand why they bother with CSS Zoom, instead of doing this:

        this.photoset.css({
          'transform': 'scale(' + r + ')',
          'transform-origin': '0 0'
        })

But if they insist (maybe old IE compatibility?) then they can just change it to this:

        this.photoset.css({
          zoom: r,
          '-moz-transform': 'scale(' + r + ')',
          '-moz-transform-origin': '0 0'
        })

I'd recommend that reaching out to tumblr to make that simple fix.

@miketaylr

This comment has been minimized.

Copy link
Member

@miketaylr miketaylr commented Oct 18, 2019

Let me tweet at @mfinkle (unless he sees this ping first...): https://twitter.com/miketaylr/status/1185258129220685824

@miketaylr

This comment has been minimized.

Copy link
Member

@miketaylr miketaylr commented Oct 18, 2019

@cipriansv

This comment has been minimized.

Copy link

@cipriansv cipriansv commented Nov 22, 2019

After retesting the issue I confirm that the issue has been fixed.

image

Tested with:
Browser / Version: Firefox Focus 8.0.24
Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

@cipriansv cipriansv closed this Nov 22, 2019
@lock

This comment has been minimized.

Copy link

@lock lock bot commented Nov 29, 2019

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 29, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.