lcdsantos / jQuery-Selectric

jQuery plugin for easy manipulation and customization of HTML selects
http://selectric.js.org/
MIT License
727 stars 158 forks source link

Items do not display on Safari 16.1 Ventura #252

Open asecondwill opened 1 year ago

asecondwill commented 1 year ago

On my site, and on the demo site for the plugin, Safari does not show items until you mouse over them. I cant see that hovering is changing a css property, It just doesnt seem to be painting the li items for some reason. See "Custom markup for items box".

http://selectric.js.org/demo.html

asecondwill commented 1 year ago

I've made a workaround based on this:

https://martinwolf.org/before-2018/blog/2014/06/force-repaint-of-an-element-with-javascript/

        $('select.themeSelect').selectric({            
            onOpen: function() {                                                
                var wrp = this.closest('.selectric-wrapper');
                var fixer = wrp.getElementsByClassName('selectric-items')[0];                
                fixer.style.display='none';
                fixer.offsetHeight; // no need to store this anywhere, the reference is enough
                fixer.style.display='block';
            },
            onClose: function(){
                var wrp = this.closest('.selectric-wrapper');
                var fixer = wrp.getElementsByClassName('selectric-items')[0];
                fixer.style.display='none';
            }
        });