search

fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
819 stars 98 forks source link

Unexpected :empty selector #631

Closed ExileofAranei closed 7 months ago

ExileofAranei commented 8 months ago

Describe the bug

Hi, 5.0.34 introduced this style:

.fancybox__container *:empty {
  display: block;
}

Is this required style? Because by default it has higher specifity than base classes, display: block; is not always wanted for each element with no children. :empty ignores pseudo elements, what kinda broke my UI in popup. Maybe there are a way more unexpected side effects with this rule

image image image image

Reproduction

A minimal example for issue with pseudo elements: https://jsfiddle.net/exileofaranei/1Lg9ednh/35/

Additional context

No response

fancyapps commented 8 months ago

It's so typical. This snippet was added to make Fancybox compatible with Shopify so that it works without writing any additional code. But you call this "a bug".

ExileofAranei commented 8 months ago

But with this style library enforces me to write some extra code, patch updates should not bring that

fancyapps commented 8 months ago

Yes I see. I'll adjust the selector so it doesn't affect the content. Sorry for the trouble.

ExileofAranei commented 8 months ago

Sorry, my first demo was too poor. There is a better one: https://jsfiddle.net/exileofaranei/zo3vhcbj/1/

brendon commented 7 months ago

Just found this too :) It breaks font awesome icons (webfont based) where it's an empty <i> with a ::before to set the character representing the icon in the font.

fancyapps commented 7 months ago

It should be fixed in the latest release, sorry for the inconvenience.