2013-11-25 4 views
2

Пожалуйста, смотрите этот пример: http://jsfiddle.net/niaconis/5jgHj/Возможно ли разбить позиционный элемент из родителя, который имеет преобразование?

Использование position: fixed работ разбить окно «Ъ» из своего position: relative родителя.

Можно ли сделать то же самое для коробки «d», хотя -*-transform применяется к ее родительскому?
Если да, то как?
Если нет, то почему? Существуют ли какие-либо работы/полисы?

Для получения дополнительных разъяснений, в моем реальном использовании элемент position: relative имеет transform, применяемый через javascript, поэтому я не могу его просто удалить. В частности, это элемент, который вводит панорамирование на карте Leaflet.

+0

+ 1: Ого, это странная ошибка. –

+1

Возможный дубликат [Фиксированные позиции не работают при использовании -webkit-transform] (http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform) –

ответ

1

Это вопрос WebKit reported here для всех transform s

работы вокруг от this SO post является создание еще одно средства преобразования и применить его в случае WebKit браузеров, использующих медиа-запросы (другие средства зависит от того, каких преобразований вы намерены применять)

вы могли бы сделать то же самое с помощью яваскрипта функции taken from this SO post обнаружить браузер и применить замену преобразования, если это Chrome, Safari, или (в вашем случае) Firefox

// Returns [Browser, Version] 
navigator.sayswho = (function(){ 
    var N= navigator.appName, ua= navigator.userAgent, tem; 
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i); 
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1]; 
    M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?']; 
    return M; 
})(); 
if(navigator.sayswho[0] == "Chrome" || navigator.sayswho[0] == "Safari") { 
    // Do webkit specific fix 
} 
if(navigator.sayswho[0] == "Firefox") { 
    // Do Firefox specific fix here 
} 

Однако обе эти работы связаны с созданием преобразования по-другому (не используя преобразования). Скорее всего, вам придется воссоздать тот же эффект, используя JavaScript и применять его в таких случаях, что далеко от идеала

Я бы рекомендовал работать вокруг вопроса по-другому, скорее всего, путем удаления position:fixed

+0

Спасибо за быстрый ответ. В отчете об ошибке упоминается, что это работает правильно в FF/IE/Opera, но я считаю, что FF тоже не работает. Мое преобразование должно быть динамическим (применяется через js). В этой ситуации применяется обход средств массовой информации? – nickiaconis

+0

@ codefox421 Обновлено мое решение с тем, как вы обнаружите браузер с javascript в отличие от медиа-запросов. Что касается фактической замены, это зависит от того, какие преобразования вы хотите применить, потому что вам придется воссоздать преобразования по-другому –

+0

Я вижу. Я использую это с системой сопоставления js (Leaflet), и мне нужно держать что-то, что обычно качается с картой в фиксированном месте на экране. Поэтому, я думаю, мне будет легче редактировать источник карты, чтобы использовать метод, отличный от 'transform' для панорамирования, чем найти замену для' position: fixed'. Спасибо за вашу помощь! – nickiaconis

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