JS Google Maps разбивает фиксированный элемент

У меня есть сайт с фиксированной навигационной панелью, которая должна прокручиваться со страницы. Когда я добавить JS Google Map, панель навигации больше не двигается:JS Google Maps разбивает фиксированный элемент

http://amosjackson.com/map/index.html

Кроме того, проблема возникает только тогда, когда карта абсолютно позиционирован.

источник

2013-05-03 Amja

Это проблема, связанная с браузером (хорошо работает с Chrome, но не на FF), а также имеет отношение к z-index. Предоставление отрицательного z-индекса меньше, чем «-1», как вы это делали на карте, должно исправить проблему. –

@ DanieleB это работает, когда я даю карте положительный z-индекс, но теперь я не могу заставить текст идти сверху. – Amja

Добавление z-индекса в текстовый элемент, который больше, чем один из карт, может работать ... –

удалить Z-индекс от карт Google DIV, а также придать ему значение непрозрачности таким образом, что текст становится видимым .. играть с ними ..

надежду, что помогает ..

источник

2013-05-03 19:16:14 Baz1nga

Добавить translateZ к фиксированному элементу

-webkit-transform: translateZ(0);

Обнаружен при анализе всего холста карты google. API добавляет также карту -webkit-transform: translateZ(0). это ломает много браузеров при правильной покраске фиксированных элементов.

Кроме того, фиксированный элемент может также нуждаться в других связанных видимых свойствах, таких как z-index и непрозрачности.

Рабочий раствор: (я всегда кладу карту холста в контейнер)

.my-fixed-elem { 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    transform: translateZ(0); 
    z-index: 500 // adapt for your project 
    opacity: 1 // some times you can remove this 
} 

.map-canvas-container { 
    width: 100%; // somewidth 
    height: 750px; // someheight 
    position: relative; 
    z-index: 18; 
    top: 0; 
    left: 0; 
} 

#map-canvas-contact { 
    width: 100%; 
    height: 100%; 
}

С наилучшими пожеланиями

источник

2013-11-19 19:56:48

Это, похоже, решает проблемы с рендерингом, но нарушает анимацию ключевого кадра (по крайней мере, в Chrome: 35.0.1916.114). Любые мысли о том, как разрешить это, не нарушая анимацию или прибегая к уродливым взломам? – Julian

Добавление реквизита преобразования к фиксированному элементу помогло решить эту проблему. Интересно, что это происходит только в Chrome - FF и IE, и это без проблем. – Bosworth99

Это своего рода WebKit ошибки, связанные с «преобразования» настройки CSS, который добавляется к внешнему элементу карты. Преобразование: translateZ (0px) добавляется в атрибут стиля, но не нужно его там, удаление его не влияет.

Итак, ответ заключается в том, чтобы добавить строку css на страницу и использовать флаг! Important, чтобы она переопределила атрибут атрибута стиля.

<style> 
#map-canvas[style] { -webkit-transform:none !important; } 
</style>

Отметим, что [стиль] часть делает это только вступит в силу, если Google добавляет атрибут стиля, и # карта холст, возможно, потребуется изменить, чтобы соответствовать элемент, который отправляется google.maps.Map ()

источник

2015-09-23 18:14:37 efreed

JS Google Maps разбивает фиксированный элемент

ответ

Смежные вопросы