css :target i not target działają w zaskakujący sposób. Czy to kwestia FF?

0

Cześć,
Mam pewien problem dotyczący przełaczania widoczności za pomocą

&:target {
        display: block;
    }
    &:not(:target) {
        display: none;
    }

takiej konstrukcji + menu z anchorami.Strona jest pod adresem jak niżej, kod jest pod adresem jak jeszcze niżej.

https://kiszuriwalilibori.github.io/TestZ

https://github.com/Kiszuriwalilibori/TestZ

Strona zawiera dwie sekcje z ID #Introduction oraz #aboutme.Problem natomiast polega na tym, że w pewnych sytuacjach widzę obie sekcje (przynajamniej częsciowo). Korzystam z FF. Najprostszy sposób na odtworzenie problemu

  1. Otworzyć stronę na laptopie w FF
  2. Kliknąć najbardziej lewy guzik (o mnie)
  3. Wybrać inne urządzenie-coś o małym ekranie.
  4. Kliknąc czerwony guzik na dole. Powinien przenieść do Introduction, poniżej kod tego trójkąta
<a href="#Introduction">
                <span class="triangle__more"> <img src="./assets/up-arrow.svg" alt="arrow up"></span>
            </a>

Tymczasem dostaję pomieszane obie sekcje. W podglądzie w obu mam aktywne

.section:target {
    display: block;

I nie ogarniam dlaczego. Zdaje się, że tak jest w FF ale nie w Chrome, ale jeszcze za krótko to przebadałem.

2

Nie widzę u siebie podobnego efektu.
Natomiast nie rozumiem, dlaczego używasz selektora:
.section:not(:target)
zamiast po prostu:
.section

0

Po prostu widzę w inspektorze: mam aktywne #aboutme (display: block) a nieaktywne #Introduction (display: none). Klikam na trójkąt, #Introduction robi się aktywne(display:block) ale #aboutme nadal jest aktywne! i tego nie rozumiem.

1

W inspektorze widzę aktualny stan sekcji, natomiast podgląd DOM w firebugu nie aktualizuje mi stanu sekcji po powrocie do introduction i wymaga ponownego uruchomienia, żeby odczytać aktualny stan. Niemniej sama strona nadal wyświetla tylko jedną sekcję.

0

U mnie na Firefox 92 wszystko działa tak jak powinno, przy przełączaniu pomiędzy sekcjami jedna robi się nieaktywna, a druga się aktywuje.
screenshot-20210930144257.png

Tylko nie rozumiem do końca punktu

Wybrać inne urządzenie-coś o małym ekranie.

Problem się pojawia po wejściu z desktopowej przeglądarki FF i następnie przełączeniu w tryb mobilny?

0

@Michał Obara: Tak dokładnie, to się dzieje po zmianie urządzenia!

2

Rzeczywiście po przełączaniu trybu desktop/mobilny ten problem występuje.
Wydaje mi się, że to po prostu taki mały bug w narzędziu dev Firefoxa. Nie przejmowałbym się tym - w praktyce żaden użytkownik nie korzysta z narzędzi developerskich, żeby sobie oglądać stronę na komputerze w widoku mobilnym. A przy zwykłym zmianianiu rozmiaru okna przeglądarki wszystko działa prawidłowo.

0

@Michał Obara: Dzięki, uspokoiłeś mnie. Z drugiej strony to portfolio (początek) jako takie może być intensywnie testowane. Ale niech tam, idzie dalej jak jest.

1 użytkowników online, w tym zalogowanych: 0, gości: 1