CSS perspective causes elements to shift out of position.
Reported by
trusktr@gmail.com,
Nov 18 2017
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; CrOS x86_64 9901.66.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.82 Safari/537.36 Platform: 9901.66.0 (Official Build) stable-channel caroline Steps to reproduce the problem: Example URLs: In this first example, the pink square is slightly offset, causing the teal WebGL square behind it to be visible: https://codepen.io/trusktr/pen/KyXvOp In this second example, commenting out the CSS "perspective: 800px;" value causes the pink square to shift upwards and be in the correct place as expected: https://codepen.io/trusktr/pen/yPpNZV What is the expected behavior? I was expecting that no matter what value of perspective is applied, if a DIV element is flat (not rotated) and positioned on the Z=0 plane, then it's positioning should not be affected by any value of perspective; whether any perspective is applied or not, I was expecting the pink DIV element to be in the exact same position no matter what. What went wrong? It seems that when any value of perspective is applied in this particular example, the pink DIV element shifts down slightly and unexpectedly. Did this work before? N/A Does this work in other browsers? No I can reproduce the same exact problem in Firefox and Edge. Chrome version: 62.0.3202.82 Channel: n/a OS Version: 9901.66.0 Flash Version: Why does this happen?
,
Nov 18 2017
I can't figure out what exactly is happening. When the <canvas> is `display:inline`, it causes the body to appear to stick out beyond the window edge. When the <canvas> is display:block, the body fits perfectly within the window. I am observing this based on the blue highlight boxes that Chrome inspector draws. However, Chrome inspector reports that the numerical size of the body is the same either way (regardless if the the canvas is block or inline). So based on the numbers, I can not tell what is happening. Based on the visuals (Chrome inspector's blue boxes), I can see the body is taller when the canvas is display:inline, and therefore the `top:50%` property of the pink <div> element causes the <div> to shift downward because the body *appears* to be bigger. But why aren't the numbers telling the truth? Is there a bug in what the Inspector is showing? Attached are two screen shots. The only difference is that in one of them the canvas is display:block. In both screen shots, I am hovering over the <body> in the inspector. In the shot with the block-styled canvas, you'll notice that the blue highlight box representing the <body> does not extend past the edge of the codepen's viewport area, whereas it *does* extend past the edge of the viewport when the canvas is display:block. You'll also notice that the body height values reported by Inspector are (misleadingly) identical (562px). Should I open a new issue for this?
,
Nov 18 2017
Seems fixed in Chrome canary 64 so I guess it might be a duplicate of issue 781699 ?
,
Nov 19 2017
Seems like that is about issue. In my case I can reproduce the problem in all browsers. Seems like a quirk, a strange and rare one. As for the inspector not showing correct numbers, maybe that's a bug?
,
Nov 20 2017
,
Nov 21 2017
Oops, I meant "Seems like that is a different issue" at beginning ofy previous comment.
,
Nov 27 2017
Could you please file a distilled version of this bug against DevTools?
,
Nov 27 2017
Please file a new issue for the devtools bug. |
||||
►
Sign in to add a comment |
||||
Comment 1 by trusktr@gmail.com
, Nov 18 2017Ah, I partially know why. The <canvas> element isn't a `block` element, so for some reason (?) it causes the <div> element to shift downward. When I add the style canvas { display: block; } then the problem goes away as shown in this pen: https://codepen.io/trusktr/pen/WXdvVr I believe it has to do with how fonts/texts are handled with inline elements. What's going on exactly?