Как правильно вычислить координаты popup меню?

Question

[Dmitry Demin]

Здравствуйте. Есть задача забацать popup-меню. Все было хорошо до тех пор, пока не дошел до этапа "появись около правого/нижнего края".
Нужно определить, насколько нужно сдвинуть меню, чтобы она поместилась в окно браузера (position: fixed обязателен, увы).
Моя попытка привела вот к таким наброскам:

<polymer-element name="popup-menu">
    <template>
        <style>
            @import url(popup.css);
        </style>
        <div class="popup {{stateClass}}" style="left:{{x}}px; top:{{y}}px;">
            <content></content>
        </div>
    </template>
    <script src="blabla"></script>
</polymer-element>

Polymer({
            stateClass:'',
            x:0,
            y:0,
            ready:function() {
                var self=this;
                this.tabIndex=0;
                this.style.outline='none';
                this.popup=this.shadowRoot.querySelector('.popup');
                this.onshow=function() {
                    var eh=self.popup.offsetHeight,
                        ew=self.popup.offsetWidth;
                    console.log(eh,ew);
                    eh=window.innerHeight-eh;
                    ew=window.innerWidth-ew;
                    if (self._x>ew)
                        self.x=ew;
                    else
                        self.x=self._x;
                    if (self._y>eh)
                        self.y=ew;
                    else
                        self.y=self_y;
                    console.log(window.innerHeight,window.innerWidth);
                    console.log(self.popup.style.top=eh.toString()+'px');
                    console.log(self.popup.style.left=ew.toString()+'px');
                };
                this.onblur=function() {
                    self.hide();
                };
            },
            attributeChanged:function(name,oldV,newV) {
                this[name]=newV;
            },
            //methods
            get visible() {
                return this.stateClass==='visible';
            },
            set visible(bool) {
                this.stateClass=bool?'visible':'';
                if (bool) this.focus();
            },
            show:function(x,y) {
                this.visible=true;
                this._x=x;
                this._y=y;
            },
            hide:function() {
                this.visible=false;
            }
        });

Суть проблемы в том, что при срабатывании onshow меню неправильно просчитывает координаты и пропадает за пределы страницы.

Answer 1

[Dmitry Demin]

Коль желающих помочь не нашлось, сам решил и сам же отвечаю на свой вопрос.
Проблема была в:

1. Нулевых размерах скрытого элемента (неожиданно!)
   
2. Деформации блока при соприкосновении с правым/нижним краем
   

Решилось все довольно велосипедным алгоритмом:

1. Задаем элементу opacity:0.
   
2. Откладываем вычисления при помощи setTimeout(fn,0) и даем Polymer'у "показать" его.
   
3. Вычисляем координаты для уже видимого, но еще прозрачного элемента.
   
4. Не забываем добавить margin (я взял 25px).
   
5. Присваиваем элементу opacity: 1;