Geek Answers Handbook

Featherlight.js - Large Images Still Scrolling

I am using featherlight.js version 1.3.3 and I still get vertical scrolling on large images. For some reason, things don't change quite correctly.

To play, just drop a link to a really large image and launch featherlight - vertical scrolling. It happens in the latest version of Chrome, Safari and Firefox for Mac.

I noticed that this does not happen when using the WP Featherlight plugin, however, it seems that this plugin uses a modified version of version 1.2.3, for which CSS (and possibly JS) does not match what is on Github.

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

.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 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; }

Among other things, the repo code adds a transparent lower bottom of the border, which may cause some little things.,.

Anyway, I saw various topics that cause the vertical scroll problem - do you have a solution that works? Version 1.3.3 seems to still be a problem, and I'm not sure if I just missed something.

UPDATE 1 (8/25/15)

Ok, so here we go. In fact, it seems that there are two problems that are potentially related to box-sizing , but are not completely sure of complete honesty.,.

ISSUE 1: The lightbox fills the entire vertical space without laying

Demo: jsfiddle.net/aoejbz8s/10/

If you look at the fiddle or try using featherlight on any of the 20 WP themes, you will see this problem. This seems to happen when box-sizing: border-box is not explicitly set for the .featherlight container and its contents. This problem does not occur on your demo page ( http://noelboss.imtqy.com/featherlight/ ), because you have bootstrap enabled, which includes the following CSS:

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

Not all topics include this, however, and it seems that explicitly adding this via CSS would be a good idea.

However, something else was awkward when I just applied the above CSS and nothing else.,.

ISSUE 2: Large image scrolls

Demo: jsfiddle.net/aoejbz8s/9/

Therefore, when I turn on bootstrap CSS, the lightbox now looks like the right size (with vertical filling), however, a large image forces the entire content area to scroll. For some reason this does not happen on your demo page, but is in the fiddle.

In addition, if I launch a lightbox on your demo page and deploy my own website with the same JS / CSS enabled and run lightboxes of the same image, both with the same viewport size, the images change differently

Here is a screencast of this problem in action: http://g.recordit.co/k9B5B0IInH.gif (shuts down prematurely, but dismantles the problem nonetheless)

So, I suppose there should be some kind of CSS style in it that causes this problem, but for the life of me I can't find what it is. I am wondering if your demo page has an extra CSS rule that affects this problem, or maybe all the other topics that I tested, have CSS that breaks the situation.

Additional thoughts / questions

  • To easily test the problem, I think it would be useful to simply deploy the Twentytwelve WordPress installation with an empty list and try it all.
  • Perhaps this is the problem of using width()/height() vs 'outerWidth()/outerHeight() in JS
  • The WP Featherlight CSS / JS plugin is very different from the one in the Github repository, are there any reasons for this, and if so, do these differences reflect the WP-specific solution for this problem?

UPDATE 2 (8/25/15 - later)

So, after digging into the WP Featherlight plugin, I have identified several styles that seem to completely solve this problem - I don't know why they are not included in CSS by default. It:

.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 they are not included in CSS by default? Is there anything else I'm missing? It seems like this is too obvious to be the right decision :)

+5
source share
2 answers

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

 .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 .featherlight-content class (removed border-bottom: 25px solid transparent , removed max-height: 95%; and changed margin-left and margin-right to 10px ). I also completely removed the @media request.

+2
source

I found this fixed the problem for me:

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

More articles:


All Articles