У меня проблема с двумя моими div. Один из них фиксируется (.post), другой родственник (.imageStyle):Только Chrome: Исправлено Div w/Google Map прокручивается, когда другие прокрутки div
.post{
position:fixed;right:0px;top:0px;bottom:0px;width:48%;background:#fff;
color:black;box-shadow: -2px 2px 10px #1f1f1f;text-shadow:none;
overflow:auto;height:100%;z-index:99999
}
.imageStyle{width:45%;position:relative;background:#1f1f1f;
margin:0px;padding:0px;height:100%;z-index:5}
Внутри .post является реализация Google Maps V3. В IE & Firefox отображается, как ожидается; когда я прокручиваю вниз в .imageStyle div, .post остается фиксированным там, где это должно быть. Однако в Chrome, когда я прокручиваю вниз внутри .imageStyle, карта остается там, где она должна быть, но остальная часть содержимого .post прокручивается с помощью .imageStyle (или ведет себя так, как если бы она была относительной).
Это особенно странно, потому что на каждой другой странице, которая у меня есть с этими div, содержимое внутри .post ведет себя корректно во всех браузерах. Кроме того, эта проблема сохраняется только в Chrome.
Google Maps - это реализация API Google Maps V3, предоставляемая моим поставщиком IDX. CSS для их реализации выглядит следующим образом:
/*** Map Search (Template #1) ***/
#IDX-propTypeTextLinks {display:none;}
#IDX-searchNavWrapper {margin:5px auto; text-align:left;position:relative;}
#IDX-mapPropertyTypes {float:left; width:192px;}
#IDX-mapPropertyTypes select {border:1px #AAA solid; float:left; width:182px;}
/* This link allows a user to save a map search directly */
#IDX-saveMapSearch {float:left;}
#IDX-googleMap {width:100%; height:600px; clear:both; position:relative; overflow:hidden; border:1px #000 solid; margin:10px 0;}
/* This holds the informational text regarding the number of properties found in a given search */
#IDX-mapInfo {width:400px; height:14px; margin:5px 0 5px 0; float:left; left:5px; font-size:11px; text-align:left;}
/* The controls float near the google map and add additional features to the core Google Controls */
#IDX-mapControls {padding:0px; margin:0px;/*width:97px;*/ height:100%; position:relative; top:0; left:0;/* background:url(/images/layout/mapSearch/20- controlBg.jpg) top left repeat-y; border-right:1px #AAA solid;*/visibility:hidden;display:none;height:0px;width:0px;}
#IDX-mapContainer {color:#000; background:#E5E3DF url(http://www.idxco.com/images/layout/gload.gif) top center no- repeat;width:100%;height:602px;}
#IDX-mapContainer a:link, #IDX-mapContainer a:hover, #IDX-mapContainer a:active, #IDX-mapContainer a:visited {color:#000;}
/* The mapWithContainer should normally be #IDX-googleMap width minus #IDX-mapControls width minus border width. In this case, 560 - 96 - 3 = 472px */
.IDX-mapWithContainer {width:464px; height:360px; position:relative; top:0; left:0px;}
.IDX-mapWithoutContainer {width:100%; height:100%;}
#IDX-mapOverlay {width:150px; height:50px; position:absolute; top:10px; right:10px; z-index:500; display:none; background:url(/images/layout/mapSearch/overlay.gif);}
/* Mode switching allows the map to be drawn with different tilesets */
.mapTypeButton {cursor:pointer; margin:0; padding:0; border:0;}
#IDX-modeRow {width:96px; height:131px; position:relative; clear:both; background:url(/images/layout/mapSearch/20-modeBg.jpg);}
#IDX-mapTypeMap {width:76px; height:20px; position:absolute; top:34px; left:10px; background:url(/images/layout/mapSearch/20-modeMap.jpg);}
#IDX-mapTypeSat {width:76px; height:20px; position:absolute; top:56px; left:10px; background:url(/images/layout/mapSearch/20-modeSat.jpg);}
#IDX-mapTypeHyb {width:76px; height:20px; position:absolute; top:78px; left:10px; background:url(/images/layout/mapSearch/20-modeHyb.jpg);}
#IDX-mapTypeTer {width:76px; height:20px; position:absolute; top:100px; left:10px; background:url(/images/layout/mapSearch/20-modeTer.jpg);}
/* The following CSS controls the general search controls */
#IDX-searchForm {margin:0; padding:0;}
#IDX-searchBoxWrapper {width:555px; height:60px; clear:both; margin:0; padding-bottom:20px;}
#IDX-searchBox {width:500px; height:55px; margin:0 auto; float:left; position:relative; left:97px;}
/* This container should be as large as the #IDX-googleMap declaration (minus borders, of course) */
#IDX-mapBasicBox {width:100%;height:600px}
#IDX-mapBasicBox input, #IDX-mapBasicBox select {border:1px #AAA solid;}
#lowPrice, #highPrice, #sqFt, #daysOnMarket, #acres {width:100px;}
/* These elements will be display and need CSS */
#IDX-mapMinPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapMaxPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchAcres {display:none; float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBathRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms select {width:100px;}
#IDX-mapSearchBathRooms select {width:100px;}
#IDX-mapSearchHelpText {clear:both; text-align:center; font-size:8pt; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;visibility:hidden;}
Я попытался настройки с позицией обоих вышеупомянутых дивы и карт CSS и не могу показаться, чтобы заставить его работать в Chrome.At момент я предполагаю, что проблема каким-то образом связана либо с самим API Карт Google, либо с CSS для него. Любая помощь в этом вопросе была бы весьма признательна.
Редактировать: Кроме того, я хочу упомянуть, что проблема не появляется до тех пор, пока карта google не завершит загрузку. Другими словами, если вы находитесь на медленном соединении или блокируете функцию карты, вы можете видеть, что все элементы ведут себя корректно, пока карта не загружена.