Why does placing two canvas element and having position absolute apply on second element increase their width?

Question

https://code.sololearn.com/W17cK3U0IHTV/?ref=app

Answer 1

Runtime Terror ty .Maybe it is working fine according to you but i can't understand how it is . I still have the following questions ,

1) why adding position:absolute to second canvas make both of the canvas width stretch more than widow width .

2) and why adding position:absolute and left:0 px hides the first canvas permanently . I used z-index on canvas1 but it seems like it disappeared . Btw , i thought making elements absolutely positioned makes them start at top left of the window, didn't knew or understood that i had to use left property as well.

Edit: i just noticed that canvas1 is still there but z-index doesn't seems to work on it!

Answer 2

Abhay - Your question seems to be misunderstood by everyone here. Or... it could just be me. ;)

If I understand you correctly, #canva2{ position: absolute; } is creating some odd behaviors with the window.innerWidth value.

My observations are as follows:

From Android:
- Running Code As Is:
-- console displays: --
612
616

- Running code after removing line 15 in CSS tab:
-- console displays: --
477
481

From Web Browser:
There are no differences in the console output for window.innerWidth in any scenario.

In fact, the same value is always displayed on both lines.

In my case, for the width of my output panel, the value was:
496
496

This was the case regardless of the css position value on #canva2.

In short... I have NO idea why this behavior is occurring on the Android app.

It would be good to know if this is the same for those running the iOS app.

Answer 3

I should also note that adding left: 0px; to #canva2 with position: absolute; does return the console output back to:
477
481

However, the following still remain unclear:
- Why the difference between Android and Web?
- Why left: 0px; restores to the original width prior to using absolute position?
- Why the border widths affect the 2nd output value in Android?
- Why the visual difference isn't affected when the width is increased? There's no scroll bar for the increased width.

It's very odd.

Answer 4

i understood what he meant, but i was shocked by this odd behavior like you.
i have tested this code in Chrome android .
on Chrome a scrollbar added to page. And the width of the page really increased.
But on Android webview in SoloLearn , only the value of the numbers changed and not the real width of the page.

Answer 5

Thank you all for the answers.

For me it works the same in browser (chrome) and on android sololearn app.

Looks like it has do with those element being inline elements . I don't really know what is happening but from all the answers (especially by Nico's one) ,what i understand is that the second canvas increases the body element size which results in increase of window's innerWidth value.

However, i still can't understand how all of it works.
I have few questions ,

1) Are styles applied immediately after each line is executed in javascript ?,if yes then initially window width was equal to 360 (for my device) , and it shouldn't result in increase of width . You can try to set it explicitly.

If the answer is no , how is it working then ?

Answer 6

Add left: 0; and it works

Answer 7

Runtime Terror ty for answering . But i have different colors added to both and making them block level element works fine ,similar to what position absolute do with left :0px . Also they seem to work fine without making them block.

And now all this doesn't makes any sense to me . I thought css was easy (at least something that makes sense) .

Anyway , tyvm!

Answer 8

Abhay
1. Both are stretching because the second pushes the size of the body and the first canvas ajusts itself

2. It draws html element from the top to the bottom. If the absolute element is on lower line, than it gets drawn later

Answer 9

Runtime Terror ty vm , i will look into painter's algorithm.

My first question is very clear .What i mean is Both elements have a width set to window innerWidth which should be 360 according to my device screen size .But adding position absolute on second canvas stretch both of them to almost double width of that .

Answer 10

when you add border to first canvas and you initialize a explicit value to canvas width, box-sizing loses its affect.
border is 4 pixel and innerWidth is "x" so innerWidth becomes x+4.
thereby width of second canvas is x+4.