Side bar rendering broken at width of exactly 1024px

[wpbrown]

Configuration

• Operating system with its version: Windows 10
• Browser with its version: Firefox 61.0.2
• Hugo version: 0.46
• Tranquilpeak version: 0.4.3-BETA and 0.4.4-BETA
• Do you reproduce on https://tranquilpeak.kakawait.com demo?: Yes

Actual behavior

Side bar renders without background and misalignment.

Expected behavior

Side bar transition from collapsed to expanded.

Steps to reproduce the behavior

Size browser to 1024.

[wpbrown]

Upon further investigation, this seems to be a general problem with CSS reference pixels vs device pixels. This only happens on my 4K display where I have OS display scaling at 175%. If I slide the window over to my 1080P display with 100% scaling, all window sizes work properly.

The only work around I've found so far is to carefully add 1px overlap to the media queries and make sure when both queries are matching that everything cascades properly and the final computed properties are as they should be. It feels hacky and I haven't gotten it fully working yet, but getting close.

Edit: Found this discussion of the exact problem:
http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem

Unlike at the time of that writing, it seems Chrome is affected too. Edge, Chrome, and Firefox all using fractional pixels in media query evaluation.

[kakawait]

@wpbrown I saw that you find a workaround. Could you please share the code you did it (not minified/concated version)?

I don't have 4K display unfortunately so it will be hard for me to debug it without your help

[wpbrown]

You don't necessarily need a high DPI display, you just need to up your display to a fractional scaling value like 125%. I honestly don't know what I was thinking 10 months ago. Seems crazy that I wouldn't have updated the unmodified source too, but it sure looks that way 😸 I'll see if I can figure out what I did.