1

Have hit a problem I've never encounted before.

I have a element, its a panel that is fixed to the right side of the screen, and the css for the positioning is:

.myPanel{
    position:absolute;
    left:0;
}

This works fine, the mark up for the panel is generated by vaadin.

Now everything works fine, however every now and then when I refresh the page the css position:absolute is being ignored.

Naturally I open my devtools and see that according to the styles tab position:absolute IS being applied, it just doesnt look like it.

Now the odd bit

When I uncheck the tick box to remove the position:absolute styling nothing changes (as I'd expect) but when I re-check it, and the position:absolute is reapplied, the panel then shows correctly.

So even though there is no new css, removing then re-adding position:absolute fixes it.

I've always been under the impression that dynamically added elements will still take css styles that have been loaded pior. Is that incorrect?

I have ONLY had this in chrome, currently version 39

Any ideas?

UPDATE:

if at some point the css was being overridden I'd expect dev tools to flag that (style with a strikethrough etc) but its not. I have tried adding !important to it but get the exact same result (see is applied in devtool, disable and reenable fixes it).

I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.

atmd
  • 7,430
  • 2
  • 33
  • 64
  • 1
    I encountered many problems related to absolute positioning in both Chrome 38 and 39. – haim770 Dec 11 '14 at 08:31
  • 1
    maybe something overwrites it, try `position:absolute !important;` – Limiter Dec 11 '14 at 08:32
  • 1
    Do you have an example of this? I work with CSS everyday on Chrome and have never had problem. Check the bug reports for Chrome first, if its not there its probably some code overwriting it somewhere or some other code related problem. Giving us an example of this would help solve the problem. – Ruddy Dec 11 '14 at 08:34
  • 1
    I managed to 'fix' this bug by hiding and re-showing the element instantly. It was something like (using jQuery): `$('#elem').hide(1).show(1)`. – haim770 Dec 11 '14 at 08:38
  • As @Limiter said I think `position:absolute !important;` will fix it. – azhpo Dec 11 '14 at 08:39
  • Annoylingly, a css 'top' value sorted it. d'oh! – atmd Dec 18 '14 at 14:09

2 Answers2

0

Its a known bug which looks te be solved and the appears again, see also https://code.google.com/p/chromium/issues/detail?id=313221

Chilion
  • 4,380
  • 4
  • 33
  • 48
0

This seems to be working according to the spec. If width and height for a replaced element (which input is one) is auto, it's supposed to use the elements intrinsic width and height, which might cause absolute positioning to be overconstrained.

One fix is to wrap your inputs in a div, absolutely position that, and use width/height 100% on the inputs. Note that Firefox also has this behavior, and it is indeed in the spec, so it's better to fix the website than to change Chromium. ~#9 chromo...@gmail.com

As per you saying:

I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.

I would say this would be the case for all browsers. For more info, see a previous answer of mine in relation to this

Community
  • 1
  • 1
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • I dont think the bug on chrome is related to the issue I am having, there are no inputs and I have no width/height issues. It's the position:absolute that isnt being applied. The element exists and its dimensions are fine, its just not in the place it should be – atmd Dec 11 '14 at 09:12
  • Would you be able to reproduce this in a jsfiddle? Or is your error site-specific? – jbutler483 Dec 11 '14 at 09:15