Potrzebuję mieć pewność że po zmianie orientacji ekranu ( 'orientationchange' event ) rozmiar konkretnego elementu zostanie przeliczony ( getBoundingClientRect() zwróci odpowiedni rozmiar ) zanim wywołam funkcje.
Jedyne rozwiązania jakie znalazłem (w sieci) to manualne przeliczenie rozmiaru konkretnego elementu lub ustawienie setTimeout. Oba te rozwiązania są co najmniej złe.
Mam sporo zależności w CSSie odnośnie różnych konfiguracji ekranowych i nie chcę komplikować tego jeszcze bardziej. Ustawienie setTimeout w moim przypadku na 500ms czasem zdąży przeliczyć konkretny element a czasem po prostu nie, nie mówiąc o tym że zapewne jest to zależne od konkretnego urządzenia oraz przeglądarki.
Funkcja jest nieskomplikowana i ma na celu ustawienie pozycji elementu "szczegółów" bazując na pozycji "obrazu":
adjustDetailsPosition: function () {
this.$refs.details.style.opacity = '0'
if(!isMobileDevice(false)) { //desktop
// {...}
} else { //mobile devices
const pictureRect = this.$refs.picture.getBoundingClientRect()
this.$refs.details.style.top = pictureRect.top + pictureRect.height + 'px'
}
this.$refs.details.style.opacity = '1'
}
Macie na to jakieś pomysły?