Как сделать шаблон «фиксированным» в Raphael.js/IE?

Я создаю небольшой инструмент, чтобы проиллюстрировать преимущества поляризационных линз. По сути, пользователь будет перетаскивать линзы (путь Raphael.js) по ослепительной сцене (фон CSS контейнера DIV) и «видеть сквозь» линзы. Вот код js:

var rsr = Raphael("playmask", 720,540);
// Lens path
var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C29.821,149.223-0.022,112.898,0,73.293 M200.594,29.922c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C201.32,58.557,200.594,33.373,200.594,29.922");

path_f.attr({"stroke-width":2, fill:'url(img/polarized.jpg)'} );

var move = function(dx,dy){
    this.translate( dx-this.ox, dy-this.oy );
    this.ox = dx;
    this.oy = dy;
},
start = function(){
    this.ox = 0;
    this.oy = 0;
},
end = function(){   
};

path_f.drag(move,start,end);

Раздел #playmaskимеет этот CSS (только «неполяризованное» фоновое изображение и размер):

#playmask{
    height:540px;
    width:720px;
    background: url(img/unpolarized.jpg);
}

То, что я застрял, это:

  • Chrome/Firefox, как всегда, играют хорошо: форма линз появляется, а изображение заливки выглядит «фиксированным» при перетаскивании линз (см. первое изображение);
  • Версии IE 7,8,9 работают, но (сюрприз!) ведут себя по-другому: изображение заливки "приклеено" к форме линзы (см. второй прикрепленный рисунок).

Я спрашиваю: могу ли я заставить IE9/8/7 вести себя аналогичным образом, то есть сохранять фиксированное изображение заливки при перетаскивании линз? Если да, то как?

Скриншот Firefox: behavior in Firefox 11.0

Скриншот IE9: behavior in IE9

РедактироватьИспользуя Modernizr для обнаружения функций браузера, я заметил, что это странное поведение, по-видимому, связано с функцией "без улыбки"в IE. Обнаружил странное поведение IE9...фон не «прилипает», но если я перетащу маску, выделю текст и нажму правую кнопку мыши, он обновит «поляризованный» фон в правильное положение!

Редактировать 2 (21 мая 2012 г.)Решения пока нет :( но, если быть точнее, оно никак не связано с функцией "без улыбки"; и, правильно Чтобы воспроизвести ошибку в IE9, перетащите стекло, выберите текст на остальной части страницы и наведите указатель мыши на всплывающий значок акселератора (синий со стрелкой внутри). в правильном положении

Важное редактирование 3 (28 августа 2012 г.)

Вы можете найти все это упакованным в этот jsfiddle( http://jsfiddle.net/q4rXm/17/ )

33
задан Paolo Stefan 17 July 2013 в 05:24
поделиться