Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 15, 2021 at 9:13 am #1294519
    shawnbanack

    I have a decent amount of text contained within a single-toggle accordion. In Chrome, if I scroll passed the accordion so it is in the upper half of the page and click the toggle to view the information, the page automatically scrolls down slightly, cutting off the first line of the information contained within the toggle. This only happens in Chrome and does not happen in Microsoft Edge. I tried disabling all plugins to no avail (although I have nothing out of the ordinary running). I have included screenshots of the the scroll-to location prior to clicking, as well as the result showing the data being cut off due to the shift.

    Also, on mobile, when I expand an accordion/toggle, after closing it, the toggle receives an orange border up the two sides and on top. A screenshot of this is also attached. None of my borders or backgrounds are set to this color, so I am uncertain of what is causing this or how to avoid it.

    Thanks!

    April 18, 2021 at 11:00 pm #1295049
    Mike

    Hey shawnbanack,
    Thank you for your patience and the links and screenshots. I did see the jump of the page when the toggle was clicked in Chrome and I also noticed that each time the page was reloaded it would move up slightly, so if I started at #ouradvantages and kept reloading I would soon be at #aboutus, I thought this might be related the “slow scroll” action of your menu anchor links because the toggles use a “fake” ID hashtag to enable the javascript for toggling… but I believe that I was way overthinking it because I didn’t see any of these errors in the Brave browser which is also built on Chromium, the engine of Chrome.
    After testing this css: body{overflow:hidden !important;} and this jQuery:

    function custom_script() { ?>
    <script>
(function ($) {
$(".toggler").click(function(){
  $("body").css({'overflow':'hidden'});
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

    to correct the behavior in Chrome, I wanted to post the version of Chrome I was using which was Version 89.0.4389.128 (Official Build) (64-bit) but it then updated to Version 90.0.4430.72 (Official Build) (64-bit) which is the same Chromium version in my Brave Brave Version 1.23.71 Chromium: 90.0.4430.72 (Official Build) (64-bit) so when I went back and tested your toggle again I didn’t have the same issues, so I’m thinking this is a Chrome issue?
    Anyways, check your Chrome version and you are welcome to also try the css and or the jQuery if you like, but I believe most users will be getting the Chrome update shortly.
    Your second issue is the webkit-focus-ring which is a built-in accessibility color for Chrome & Safari, you can override it with this css, but it is considered bad form in accessibility circles:

    #top #wrap_all .toggler:focus,
#top #wrap_all .toggle_wrap:focus {
  outline: 0 !important;  
  outline: 0 -webkit-focus-ring-color !important; 
}

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.