Проблема в отображении фиксированных элементов в Chrome

[TMGLUK]

Добрый день!

Есть такая проблема: если поставить фиксированно позиционированный элемент (без значений позиции, авто) внутрь элемента, который лежит внутри относительно позиционированного элемента, то такой элемент в Chrome отображается на неверной позиции. Во всех других браузерах этот элемент отображается на нужной позиции: той, в которой бы он появился, если бы был статическим)

Вот пример простой: http://cssdesk.com/Gvpvg

Вот пример практический: http://cssdesk.com/mnMxs

Если кто сталкивался или знает, как это решить без применения js-костылей, то помогите пожалуйста. Судя по гуглу, с такой проблемой ещё никто не сталкивался.

[npofopr]

Простите, а что за ерунду вы делаете? И чего пытаетесь достичь?

Если гугл с этим не сталкивался, то просто вы спросили не правильно.

[TMGLUK]

Посмотрите второй пример. Там показано, что я пытаюсь достичь — горизонтального переключения контента с помощью изменения позиции .wrapper. (Если поставить left: -2560px; то по центру окажется правая часть страницы).

Edited October 16, 2013 by TMGLUK

[npofopr]

Вот по коду вообще не понятно, что вы хотите.

Картинку прикладывайте хоть что ли.

А вообще что то вы совсем не то делаете.

Посмотрите статьи:

http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/

http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/

http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/

Там как раз, как мне кажется то, что вы хотите

[TMGLUK]

Те способы не подходят. Мой способ правильный.

У меня конкретная проблема - как заставить гребаный хром отображать страницу нормально. Я пришлю более подробный пример.

Edited October 16, 2013 by TMGLUK

[TMGLUK]

Вот пожалуйста пример: http://jsbin.com/UWENEzE/1/edit?output (в хроме естественно не работает). Попробуйте прокручивать страницу и нажимать на края.

При прокрутке центрального блока, боковые должны оставаться на месте, т.е. находится в position:fixed.

То есть проблема в том, что хром эти фиксированные элементы, которые по краям, отображает не относительно окна браузера (как должно быть), а по какой-то странной логике. Всё из-за смещённого элемента с position relative. (см. примеры в первом посте).

Я вижу решение только в эмуляции position:fixed через absolute на js, но мне очень не хотелось бы это делать.

Edited October 17, 2013 by TMGLUK

[Switch74]

не пойму для чего это нужно

а сразу сделать .text{position:fixed}

да и чтобы горизонтального бегунка не было сделал бы размеры боковых элементов поменьше с overflow:hidden;

а так вообще не понятно, что из этого правильного способа должно получиться

[TMGLUK]

не пойму для чего это нужно

а сразу сделать .text{position:fixed}

да и чтобы горизонтального бегунка не было сделал бы размеры боковых элементов поменьше с overflow:hidden;

а так вообще не понятно, что из этого правильного способа должно получиться

Если фиксировать отдельные элементы, то будет гораздо сложней с анимацией, а она должна быть согласована и плавная (css transition). Тем более предполагается больше элементов по бокам. Легче менять позицию у одного, чем у шестерых элементов.

Горизонтальный бегунок естественно убирается. Это только пример. В реальном проекте куча css и js.

Раз никто помочь не может, а это естественно - проблема нигде не встречалась, то я буду использовать position:absolute, и эмулировать position:fixed на js.

[npofopr]

Вы только обязательно выложите, что получится.

[Switch74]

http://jsfiddle.net/62vmY/

это только пример, может вам подойдет, там только нужно добавить ваши элементы и css с js вставить

Edited October 17, 2013 by Switch74

[TMGLUK]

http://jsfiddle.net/62vmY/

Там ничего нет - пустые поля.

Вы только обязательно выложите, что получится.

Да, я уже сделал на js эмуляцию для chrome. Чуть позже выложу работающий пример. А когда сайт сделаем, дам ссылку на сайт.

[TMGLUK]

Chrome Fix

CSS:

.chrome .main {
position:absolute;
top:0;
left:0;
}

JS:

if($.browser.webkit){
$('html').addClass('chrome');
var $window = $(window), $elem = $('.text>.main');
$window.scroll(function() {
$elem.css('top', $window.scrollTop() + 'px');
});

Примерно так. Chrome как всегда лажает - функция срабатывает с задержкой.

[TMGLUK]

Как и обещал, выкладываю ссылку на сайт: http://ra-atm.ru/reklamnye_uslugi/kopirajting