2016-04-17 9 views
0

Я играл с addon sdk, чтобы создать расширение, т.е. может использоваться при рисовании линии на изображении, найденном с интернет-сайта.Преобразование CSS не работает с расширением firefox

Расширение работает так, что оно расширяет DOM интернет-сайта с помощью нескольких div-тегов, которые отображаются на css.

, чтобы создать линию я использовал CSS преобразования, как этот

fibotin.draw = function (event) { 
    var currentPosX = event.clientX; 
    var currentPosY = event.clientY; 
    event.preventDefault(); 
    /* .... */ 
    if (drawSelection === "line") { 
     var length = fibotin.calculateLineLength(currentPosX, currentPosY, drawObj.startPosX, drawObj.startPosY); 
     var angle = fibotin.calculateAngle(currentPosX, currentPosY, drawObj.startPosX, drawObj.startPosY); 
     var transform = 'rotate(' + angle + 'deg)'; 

     drawObj.element.style.transform = transform; 
     drawObj.element.style.width = length; 
    } 

и в CSS Я объявил, как этот

#line{ 
transform-origin: 0 100%; 
height: 2px; 
background: red; 
position: fixed; 
z-index: 999999; 
cursor: move; 
} 

По какой-то причине этот код не работает на всех Сайта , (например, google.com) Но в некоторых случаях - на более простых сайтах - работает (www.stox.fi)

У кого-нибудь есть идея, как исправить это, чтобы он работал на всех сайтах?

вы можете проверить, как это работает на моем расширение называется Fibotin

ответ

0

position Набор для relative или absolute. Тогда это должно сделать работу transform. fixed должен заставить его работать. Странно, что это не так, может быть, что-то переопределяет это?

+1

tnx для ответа. Я нашел проблему. drawObj.element.style.width, необходимо добавить + "px" .. поэтому строка должна тогда: drawObj.element.style.width = length + "px"; – TapioS

+0

Спасибо за совместное решение! – Noitidart

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