Initial scale behavior broken in Safari 11–13

[joshuaiz]

Great update - thank you!

Working on a project and my client is running macOS High Sierra and was seeing some unexpected scale behavior when clicking on a Fancybox-designated image.

On click, the image is scaled to fill the viewport instead of being contained within the viewport (expected).

Here is a screenshot of the behavior:

Here is a screenshot of the expected behavior:

^^ in the expected version, the initial image size/scale is constrained to the viewport or window. In Safari versions 11–13, the image is scaled all the way to the width of the container.

This seems to be fixed in Big Sur but was able to reproduce the behavior using Browserstack with Safari + High Sierra/Mojave/Catalina.

Not sure if this is a Safari bug but initially was having a hard time counteracting it with CSS.

Hopefully this may be fixed in a future update?

[gj52]

same on Edge, Chrome and Firefox !
my configuration:

<script>
 Fancybox.bind("[data-fancybox='gallery']", {

   Toolbar: {
    display: [
      { id: "prev", position: "center" },
      { id: "counter", position: "center" },
      { id: "next", position: "center" },
      "slideshow",
      "fullscreen",
      "thumbs",
      "close",
    ],
  },

  animated: true,
  dragToClose: false,

  showClass: false,
  hideClass: false,

  closeButton: "top",

  Image: {
    zoom: false,
    fit: "cover",
    click: false,
    wheel: "slide"
  },

  Thumbs: {
    autostart: false,
  },

  l10n: {
    CLOSE: "Schließen",
    NEXT: "Nächstes",
    PREV: "Vorheriges",
    TOGGLE_FULLSCREEN: "ganzer Bildschirm",
    TOGGLE_SLIDESHOW: "Blättern",
    TOGGLE_THUMBS: "Miniansichten",
    MODAL: "Vollbild mit ESC Taste verlsassen",
  },

});
</script>

Setting fit: "contain" scales the image down to one pixel :-(

[gj52]

1+: the thumbs don't reflect landscape / portrait orientation of the images ....

[fancyapps]

@gj52 Your example works as expected (after replacing autostart with autoStart) - https://fancyapps.com/playground/Xg - I do not see any issue

[gj52]

Anyone here to help with this portrait picture error?
Must wait until V4 is mature for production?
Better to go back to V3?

[fancyapps]

@gj52 I do not understand your comment. I do not understand what you call an error. I don't see any problem and no one else has complained about it.

[gj52]

I refer to @joshuaiz 1st entry here. and my comments

1+: the thumbs don't reflect landscape / portrait orientation of the images
2+: not only at Safari, same on Edge, Chrome and Firefox !

Plz do not mix with my crosslink!

[fancyapps]

1+: All thumbnails have the same aspect ratio, you can change aspect ratio using --fancybox-thumbs-ratio CSS variable. Thumbnail images work similarly to v3 where you can choose fill mode using CSS (by changing background-size for .fancybox__thumb).

2+: What? I already explained, I do not see any issue. Also, I do not own computer with old MacOS, therefore I am not able to debug outdated Safari versions. Also, there are no proofs that this issue is not related to some custom CSS.

Look, you really have to proof that your issue exists. I do not want to waste time asking tens of questions just to clarify.

[gj52]

@joshuaiz has a Mac, I work with a fully patched Windows 11. Latest Edge, Firefox and Chrome!

OK, all thumbs have the same aspect ratio. Accepted.

--fancybox-thumbs-ratio was not defined in the loaded CSS. I added it!
Var(--fancybox-thumbs-ratio ,1.5) defined the dafault value - if missing. OK.

for the portrait images, I found a solution

  .fancybox__slide {
    min-width: 10%;

Where are the CSS variables defined / documented?

If THIS helps @@joshuaiz, he can close the issue.

Regards

[fancyapps]

This has been fixed in the latest release.