JQuery Mobile ui-overlay Скрытие элементов

Question

Я создаю веб-приложение JQuery Mobile и сталкиваюсь с интересной проблемой. Мое веб-приложение динамически заполняет список из данных JSON.

Проблема: когда пользователь нажимает на элемент в списке в стр. 1, Page 2 загружается нормально, однако, когда они нажимают кнопку «Назад», страница 1 не отображается правильно.

Первоначально я думал, что строки не были заполнены, однако я не понял, что они скрыты JQuery Mobile CSS: (начиная с строки 946 JQuery Mobile 1.4.2.css, которую можно найти здесь : http://jakeserver.com/Apps/BostonLandmarks/B7/css/jquery.mobile-1.4.2.css)

/* Page and overlay */ 
.ui-overlay-a, 
.ui-page-theme-a, 
.ui-page-theme-a .ui-panel-wrapper { 
    background-color:   #f9f9f9 /*{a-page-background-color}*/; 
    border-color:   #bbb /*{a-page-border}*/; 
    color:     #333 /*{a-page-color}*/; 
    text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/  #f3f3f3 /*{a-page-shadow-color}*/; 
} 

Страница что испытывает проблемы: http://jakeserver.com/Apps/BostonLandmarks/B7/landmarks.html JavaScript, что делает строки меню: http://jakeserver.com/Apps/BostonLandmarks/B7/js/landmarks.js

Я заметил, что если background-color закомментирован, появляются строки (но другие визуальные ошибки возникают) , Однако y, похоже, находятся в нижнем слое страницы.

Любые идеи о том, что может вызвать эту проблему с расслоением?

Спасибо.

Answer 1

Я считаю, что это закончилось проблемой с кнопкой «Назад» на страницах подробностей.

Спинка код кнопки был изначально:

<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a> 

Однако, я считаю, что href и data-rel были противоречивыми. Я удалил data-rel и сохранил href, и проблема со слоем страницы ушла.

Мораль истории: если вы знаете, на какой странице вернуться (и не полагайтесь на историю браузера), то на странице должно быть href, так как конфликтов будет меньше.