Inconsistant Box Sizing on 3d View.

[SilentPenguin]

Recently discovered that some elements will be reported as significantly larger on 3d view than anywhere else in devtools.

For example, on the hertfordshire county council homepage located at https://www.hertfordshire.gov.uk/home.aspx, the 3d view will report elements will extend thousands of pixels across the left margin, while the rest of the devtools does not.

However, elsewhere in the devtools, this discrepency is not visible.

Many thanks.

AB#44485044

[captainbrosset]

Thanks for reporting this bug, and providing so many details! I'll make sure this shows up on our team's radar for investigation.

[captainbrosset]

the 3d view will report elements will extend thousands of pixels across the left margin

Something to keep in mind though: the screenshot you posted shows the Composited Layers tab in the 3D View tool. This tab shows the graphic layers created by the browser's rendering engine, not the DOM elements.

So, it's perfectly normal that these layers don't match the elements on the page. Now, as to why this particular layer extends far to the left, outside the viewport, is probably something worth investigating.

[captainbrosset]

I found what was causing these layers to be so wide. text-indent: -999em; is used in multiple places to visually hide text while showing a corresponding image instead. This is often used for accessibility, so that the text still appears in the source, for screen reader users, but isn't shown visually.
text-indent seems to make the browser engine create wide layers. If you remove all instances of this property, the layers get back to a more logical size.

Does this help?

[SilentPenguin]

Interesting, I had assumed the reported values were a result of rendering, but the details as to the cause are greatly appreciated. Since it's a government website, text-indent will have certainly been chosen to improve accessability for screen readers.

Thanks for all your help in the matter.