Support

Account

Home Forums Bug Reports Issue with Post Object Field and latest Safari Update 12.0

Solved

Issue with Post Object Field and latest Safari Update 12.0

    • MH

    • September 21, 2018 at 7:20 pm

    There is a problem with the Post Object field and the latest version of Safari Browser 12.0. After selecting a post, the browser jumps to the bottom of the page.

    Wordpress 4.9.8 (clean installation)
    ACF Pro 5.7.6
    Apple Safari 12.0. OSX

    No problems with Chrome, FireFox or Opera.

    • NeilG

    • October 5, 2018 at 6:59 am

    I am also experiencing this issue using a form on the front end using acf_form. It seems to occur any time you click an item from a field with ‘Select’ set as the ‘Appearance’.

    Same WordPress version, ACF pro and Apple Safari as MH describes.

  • Same issue. Has this been resolved?

  • I have the issue with every select field in safari!

    • pkhunter

    • September 5, 2019 at 10:22 pm

    Elliott himself is looking into it based on a ticket I have created. Will share anything I find. It’s a most annoying issue as many of our authors use safari.

    • totatari

    • September 5, 2019 at 10:44 pm

    I digged into it a little deeper myself because I had to get it fixed for a customer…

    There seems to be a bug in select2 libary since latest Safari release which is not really getting fixed, I found some topics on it, i.e.:

    https://stackoverflow.com/questions/54666878/page-jumps-to-bottom-after-making-a-selection

    https://github.com/select2/select2/issues/5427

    For me this seems to be a good workaround for the moment without modifying the select2 js code:

    
            $(document).ajaxStop(function() {
            	
            	$('select.select2-hidden-accessible').on('select2:closing', function() {
                	$('body > span.select2-container.select2-container--default.select2-container--open').hide();
                });
            	
                $('select.select2-hidden-accessible').on('select2:open', function() {
                	$('body > span.select2-container.select2-container--default.select2-container--open').css('display','inline-block');
                });
            });
    

    Just add the code to your scripts and it should work… Background:
    It is a safari specific problem, that the page scrolls to bottom where the dropdown html element is placed and removed, at the end of <body>… I can’t really figure out why in detail, but if the element is not visible when getting removed the bug does not occur. So I basicly hust hook the libarys events and toogle display!

    • pkhunter

    • September 5, 2019 at 10:46 pm

    This is very helpful for now. Do you put this in your functions.php?

    • pkhunter

    • September 5, 2019 at 10:47 pm

    Or perhaps in footer.php? This is for the admin area so I’m not sure.

    • MH

    • September 5, 2019 at 11:07 pm

    Just tried it and it works great. Thank you totatari.

    • pkhunter

    • September 5, 2019 at 11:14 pm

    Where are you guys putting this script?

    • MH

    • September 5, 2019 at 11:22 pm

    In a JavaScript File, loaded in Admin Footer.

    • pkhunter

    • September 5, 2019 at 11:49 pm

    Which precisely is the admin footer file which will retain this JS code even when I update core WP? I’d appreciate a precise name of the file. Thanks!

    • MH

    • September 6, 2019 at 12:12 am

    Place this to your function.php

    
    /**
    ACF Select field: Fix for Safari Browser
    */
    add_action('admin_footer', 'my_admin_add_js');
    function my_admin_add_js() {
        ?>
        <script>
            $(document).ajaxStop(function() {
                $('select.select2-hidden-accessible').on('select2:closing', function() {
                    $('body > span.select2-container.select2-container--default.select2-container--open').hide();
                });
                $('select.select2-hidden-accessible').on('select2:open', function() {
                    $('body > span.select2-container.select2-container--default.select2-container--open').css('display','inline-block');
                });
            });
        </script>
        <?php
    }
    
    • pkhunter

    • September 6, 2019 at 12:52 am

    Thank you MH. This is so helpful!

  • You can put in to your footer, or in the head, if just on admin screen or even on frontend side depends where you are using acf…
    I would recommend the following hook, but the sulotion above is good too:

    https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

    OR

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.