Featherlight.js - Large images still scrolling

Question

I'm using version 1.3.3 of featherlight.js, and I'm still getting vertical scrolling on large images. For whatever reason, things aren't resizing quite properly.

To reproduce, just throw a link to a really large image in there and run featherlight - vertical scrolling. Happens in the latest version of Chrome, Safari, and Firefox for mac.

I notice that this doesn't occur when using the WP Featherlight plugin, however it appears that this plugin is using a modified version of version 1.2.3 for which the CSS (and possibly JS) don't match what's on Github. . .

For example, this is what's in the plugin CSS:

.featherlight .featherlight-content {
background: #fff;
border: 0;
cursor: auto;
display: inline-block;
max-height: 95%;
max-width: 90%;
min-width: inherit;
overflow: auto;
padding: 0;
position: relative;
text-align: left;
vertical-align: middle;
white-space: normal;

}

And this is what's in the Github repo:

.featherlight .featherlight-content {
    /* make content container for positioned elements (close button) */
    position: relative;

    /* position: centering vertical and horizontal */
    text-align: left;
    vertical-align: middle;
    display: inline-block;

    /* dimensions: cut off images */
    overflow: auto;
    padding: 25px 25px 0;
    border-bottom: 25px solid transparent;

    /* dimensions: handling small or empty content */
    min-width:  30%;

    /* dimensions: handling large content */
    margin-left: 5%;
    margin-right: 5%;
    max-height: 95%;

    /* styling */
    background: #fff;
    cursor: auto;

    /* reset white-space wrapping */
    white-space: normal;
}

Amongst other things, the repo code is adding a transparent border bottom that may be causing things to get a bit funky. . .

Anyhow, I've seen various threads that bring up the issue of vertical scrolling - do you have a solution that works? Version 1.3.3 seems to have this issue still, and I'm not sure if I'm just missing something.

UPDATE 1 (8/25/15)

Okay, so here we go. Actually looks like there are two issues, both potentially related to box-sizing but not entirely sure in all honesty. . .

ISSUE 1: Lightbox fills entire vertical space with no padding

Demo: jsfiddle.net/aoejbz8s/10/

If you check out the fiddle, or try using featherlight on any of WP's base twenty____ themes, you'll see this issue. It seems to occur when box-sizing: border-box is not explictly set for the .featherlight container and its contents. This issue doesn't occur on your demo page (http://noelboss.github.io/featherlight/) because you have bootstrap included, which includes the following CSS:

*, *:before, *:after { box-sizing: border-box; }

Not all themes include this, however, and it seems like explictly adding this via CSS would be a good idea.

That said, something else goes wonky when I just set apply the above CSS and nothing else. . .

ISSUE 2: Large image causes scrolling

Demo: jsfiddle.net/aoejbz8s/9/

So when I include bootstrap CSS, the lightbox now looks to be the correct size (with vertical padding), however the large image causes the entire content area to scroll. For whatever reason, this isn't happening on your demo page, but is in the fiddle.

Additionally, if I trigger the lightbox on your demo page, and spin up my own site with the same JS/CSS included and trigger a lightbox of the same image, both at the exact same viewport size, the images get resized differently!

Here's a screencast of this issue in action: http://g.recordit.co/k9B5B0IInH.gif (cuts off prematurely, but still demos the issue)

So I assume there must be some CSS style somewhere in there that's causing this issue, but for the life of me I can't seem to find what it is. I'm wondering if there's an additional CSS rule in your demo page that affects this issue, or if perhaps all the other themes I've tested with have CSS that breaks things.

Additional Thoughts/Questions

• To most easily test the issue, I think it might be helpful to just spin up a blank-slate Twentytwelve WordPress install and try this all out.
• Might this be an issue of using width()/height() vs 'outerWidth()/outerHeight() in the JS
• The WP Featherlight plugin CSS/JS is drastically different from that hosted on the Github repo, is there are reason for this, and if so, do those differences reflect a WP-specific solution to this issue?

UPDATE 2 (8/25/15 - later)

So after digging into the WP Featherlight plugin, I've identified a few styles that seem to basically resolve this issue entirely - no idea why they aren't included in the default CSS. They are:

.featherlight .featherlight-content { border: 0; padding: 0; }

.featherlight .featherlight-image { border: 20px solid #fff; max-width: 100%; }

@media only screen and (max-width: 1024px) { .featherlight .featherlight-image { border: 10px solid #fff; } }

Any idea why these aren't included in the default CSS? Is there something else I'm missing? It feels like this is too obvious to be the right fix :)

Answer 1

I had the exact same problem and solved it with the following changes to the CSS:

.featherlight-image {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 90vh;
}

I have a working example on my website here: http://christofferhald.dk/work/

I also made some other changes to the class .featherlight-content (removed border-bottom: 25px solid transparent, removed max-height: 95%; and changed margin-left and margin-right to 10px. I also removed the @media query altogether.

Answer 2

I found this fixed the issue for me:

  .featherlight .featherlight-image {
    height: 60vh !important;
    width: auto !important;
  }