WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#52296 closed defect (bug) (invalid)

Twenty Twenty-One: primary-navigation's forEach not working on safari ipad ios9

Reported by: wishboneproductions Owned by:
Milestone: Priority: normal
Severity: minor Version: 5.6
Component: Bundled Theme Keywords: reporter-feedback
Focuses: javascript Cc:

Description (last modified by hellofromTonya)

In the Twenty Twenty-One theme, older safari browsers do not support nodelist for forEach they need an Array.

Theme: Twenty Twenty-One
script: twentytwentyone/assets/primary-navigation.js
browser: Safari (ipad iOS 9.3.5)

Problem:
el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {

Solution:
Array.from(menu_dom.querySelectorAll( '.menu-wrapper > .menu-item-has-children' )).forEach( function( li ) {

Notes:
should be replaced a couple of times throughout the file

Change History (6)

#1 @hellofromTonya
3 months ago

  • Component changed from Menus to Bundled Theme
  • Description modified (diff)

#2 @hellofromTonya
3 months ago

  • Description modified (diff)
  • Summary changed from foreach not working on safari ipad ios9 to Twenty Twenty-One: primary-navigation's forEach not working on safari ipad ios9

#3 @hellofromTonya
3 months ago

  • Keywords reporter-feedback added; needs-patch removed

Hello @wishboneproductions,

Welcome to WordPress Core Trac! Thank you for the ticket.

Twenty Twenty-One theme does include a polyfill for both closest() and NodeList with forEach.

There was a problem with loading the polyfills as noted in #52098 which was fixed in v1.1. @wishboneproductions Are you using version 1.1 for the Twenty Twenty-One theme?

The code and changeset 49865 specifically reference IE11. However, if I'm reading the code correctly, the polyfills should apply for browsers that do not support closests() nor forEach for NodeList.

For reference, here's the support for Safari iOS:

Neither is supported for Safari iOS less than version 10.

For the proposed solution of using Array.from(), it is not supported many older browsers including IE 11 and early https://caniuse.com/mdn-javascript_builtins_array_from.

👉With all of that said, @wishboneproductions please confirm the theme version you're using. If on 1.0, does it resolve when upgrading to 1.1?

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


3 months ago

#5 @wishboneproductions
3 months ago

  • Resolution set to invalid
  • Status changed from new to closed

@hellofromTonya , thanks for looking in to this and pointing in the right direction. I`m sorry to submit this bug. Shame on me. I should have done some more research. While making a child-theme i didn't include the polyfill.

#6 @hellofromTonya
3 months ago

  • Milestone Awaiting Review deleted

No worries @wishboneproductions. I'm glad including the polyfill resolves the issue for you.

Note: See TracTickets for help on using tickets.