featherlight: .featherlight:last-of-type CSS is not working
- Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen, starting from http://jsfiddle.net/JNsu6/15/ .
I’m trying to recreate this issue in jsfiddle, but no luck yet. What I’m doing is popping up a Featherlight box when the page loads using $(document).on('ready', function(){... }); The featherlight window appears and the .featherlight overlay is there, and it’s using the .featherlight:last-of-type css rule. And, as elements on the page continue to load, all the sudden the the .featherlight element looses is background color, falling back to the background: rgba(0,0,0,0); rule.
At first this made me think there was for some weird reason another .featherlight element. But console.log( $('.featherlight').length ); reports back only 1 element.
So I’m not sure what is going on. I can recreate this consistently on my local development instance, but you can’t access it online yet. I can’t seem to recreate this problem in JSFiddle yet. Would you have any clues as to why this would be happening?
It’s really weird. I inspect the .featherlight element and the .featherlight:last-of-type rule just isn’t being applied to it, even though there is only 1 in the DOM. Take a look at the below screenshot. You can see $(.featherlight).length is just 1, but the rule still isn’t being applied. I have no idea what is going on here.
Any clues off the top of your head?
About this issue
- Original URL
- State: open
- Created 8 years ago
- Comments: 19 (3 by maintainers)
Is there a need for the
:last-of-typemodifier?This worked for me:
I can confirm the solution from marcandre resolved the conflict issue I had with Google Recaptcha v2. In the featherlight initialization I added:
root: 'modals'And just before the closing body tag I added:
<modals></modals>It is now working as expected.
Please provide a
rootfor featherlight if you’re encountering issues of that kind. AFAIK, that resolves all such issues.I just came across this issue because LastPass inserts a <DIV> at the end of <BODY> for its little popup ‘window’.
I know @Jakobud was talking about a PR, I’d be happy to contribute to that (or do it myself) but I’d need some direction about exactly the DOM should look like.
@teeparham Yes, for nested featherlights
I think maybe the only way to fix this is to make sure all featherlight elements end up in some sort of predetermined wrapper container, so that you can always guarantee that there are not going to be any of elements in this container that will screw up the
:last-of-typeselector.I know there is the
rootoption, but I would consider creating an extra element and not usingbodyby default. There is no good way that the Featherlight library can guarantee that it’s going to be the last element in thebodyelement. If there is any sort of other DOM manipulation happening int he background while the lightbox is open and another element is added to thebody, all the sudden your lightbox looses it’s overlay background color since it’s no longerlast-of-type.