Talage approprié aux éléments interactifs de Firefox sur macOS

Récemment, j'ai rencontré un problème de focalisation frustrant dans Firefox sur MacOS. Un utilisateur a signalé un comportement de défilement inattendu lors de l'entreprise via une intégration de codePen - la page sauterait en haut! En enquêtant, j'ai découvert des incohérences de tabbing bizarres.

Mes tests initiaux ont révélé un comportement de mise au point erratique: certains éléments étaient tabbables, d'autres non. Incroyablement, les liens ( balises) étaient parfois inaccessibles via la touche Tab. Cela semblait fondamentalement mauvais.

Après quelques recherches et enquêtes communautaires, le coupable a émergé: une préférence du système macOS affectant l'ordre d'onglet de Firefox. L'activation de cette préférence (et le redémarrage de Firefox) a résolu le problème, ce qui rend les éléments attendus comme les liens tabbables.

Le bug de défilement d'origine provient d'un lien "Skip Results Iframe" dans l'intégration de codepen. Ce lien, conçu pour contourner l'IFRAME, n'est apparu que lorsqu'il est concentré. Mon initial (et certes maladroit) tente de le cacher en utilisant position: absolute; top: -9999px; left: -9999px a fait sauter la page de Firefox en haut, même si le style de mise au point a repositionné l'élément. Cela semble être une condition de course dans Firefox.

J'ai remplacé cette méthode par une technique de cachette plus robuste et plus accessible. J'ai également trouvé illogique que Firefox affecte la position de défilement de la page parent lorsque le lien problématique résidait dans un iframe. La solution mise à jour traite également de cela.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!