This is still an issue:
Can I get an update please.
Thanks
Sam
Hi Sam,
The investigation is still on going on this one. We’re sorry for the delay but the developers are on it already.
Hi @grannysam11,
Thanks for reaching back out. I’m Alex, one of our lead developers and I’ve previously done some work trying to resolve the issue you’re referring to. I hope you don’t mind, but I’ve moved this topic into the beta forum - it’s not really beta related, but this will help keep it on the radar for me since I’m primarily working in this forum right now resolving issues.
This is an unbelievably difficult one to crack because we’ve not been able to reproduce it in a way that let’s us make adjustments and try different styles to correct it. I’ve tried on multiple devices and browsers, I’ve tried changing operating system level settings like font size and zooming. After many hours and many unsuccessful attempts I had to move the issue to the backburner so we could move forward working on the release.
I’d love to get this fixed and released. Perhaps we could keep this line of communication open, and I could work with you directly on it. If you have time, could you post on this topic some environment information?
- Browser version
- OS and OS version
- Manufacturer and model of device
And any other differences that you can think of about the device(s) where you have seen the issue. I’m looking forward to finding a solution here.
One more thing, I’ve setup a controlled test environment here:
Could you please advise if you’re seeing the bug on any or all of the three toggles shown there?
Hi Alexander
Thanks for the detailed information re. issue resolution with this one. It’s really baffling me at this end aswell… 
Can I possibly get a direct email address from you? I’d like to send you some HAR Capture (http archive) files from Chrome Developer tools which may be able to assist you guys in determining what’s going on at my end. Or if I can send through a zip file from here I’m more than happy to do that.
In the meantime, still seeing the skewed Burger Menus at this end via Chrome and Chrome Incognito:
This loading error could be playing a part…?
Also a screenshot of my console - highlighting a Burger element for some more info in the meantime:
Thanks
Sam
Hey @alexander
It also doesn’t look quite right in Firefox
The top horizontal line is thinner than the other two.
I’m sure you guys know this, but just in case:
I turn the interactive menu option off and use the three bars icon instead. Until it gets solved.
Thanks Sam! That does help. I can try some things in the sandbox and update it, then you could confirm. I suspect strongly that this is a device issue. Would you mind letting me know the device OS/model when you have a chance? Also, do you have any of Chrome’s experimental settings enabled? I wonder if that could make a difference.
Hey Alexander
Device/OS:
MacOS Mojave
Version 10.14.5
MacBook Pro (Retina, early 2015)
Graphics: Intel Iris Graphics 6100 1536MB
Memory: 8Gb 1867 MHz DDR3
Browser:
Google Chrome
Version 75.0.3770.142 (Official Build) (64-bit)
I dont have Chrome Experimental settings enabled. I have also tried turning off ALL chrome extensions, and clearing cache… to no avail.
@Misho - Thanks for the tip, hadn’t thought of that.
Thanks
Sam
Hi Sam,
Sorry about the delay here. I’ve updated the Sandbox. Let me know if any of the 4 toggles look correct. One more thing. This screenshot shows me using dev tools to inspect the .x-toggle-burger element.
Could you try inspecting that (on the right most toggle) and let me know what you see for font-size? It should be 0.1em.
Next, click to the “computed” tab, and let me know what font size you see there for font size. Here’s mine:
I’m sorry that we’re shooting in the dark here. Hopefully we’ll discover something. Thank you!
Hi @alexander
We could be getting somewhere re. this font-size situation! See screenshots below.
Font size entry here appears the same, at 0.1em:
Font size entry below in computed tab is DIFFERENT - showing 6px instead of 1.6px??? Also note the blue box measurements are much different as well (72 x 6):
The “index:45” is also different - yours showing “index:56”…?
Hopefully this helps!
Cheers,
Sam
Thanks!
Nice catch on the index being off. So it took longer than I’d care to admit to figure out but I realized that’s just because I’m logged into the site and there are a few more lines in <head>. If I check logged out it’s still line 45.
It’s very strange that the chain (14px -> 16px -> 1em -> 0.1em) would come out to 6px. It should take the most recent pixel value, then for each em value encountered it would do multiplication. e.g. 16px * 1em = 16px * 0.1em = 1.6px
Now that we’ve narrowed in a bit, would you mind sending me a screenshot of how this codepen renders for you?
Thank you!
Here you go Alexander:
Cheers,
Sam
Also @alexander - here are a few more Computed screenshots of the other Toggle elements for you, in case it provides any further insight:
Hi Sam,
I’m sorry for not getting back to you sooner. Would you mind trying one more for me? https://codepen.io/rohmann/pen/wVmvXw?editors=1100
Let me know if that looks correct. Thank you!
Ok, false alarm - I don’t think that makes a difference. For the first time ever I’ve been able to reproduce this on my computer. It’s because in Chrome settings “Minimum font size” is enabled. That value becomes the floor for relative font sizing which throws everything off. I’m not sure what we can do to fix it just yet, but now that it’s consistently reproducible we will be able to properly investigate.
2 Likes
Update: We’re between a rock and a hard place on shipping an actual solution for this. Using CSS font-size to power the burger toggle dimensions was so it would scale proportionate to the element’s base font size, which inherits from parent contexts. If we use a CSS height we lose the scaling effect. Other techniques we’ve considered would lead to breaking changes in the element.
I don’t know if we will have a solution in place for this release, but we’re so happy that this is finally somewhat actionable now that we’ve identified the underlying cause. Know that we are taking it seriously. There’s always the possibility that a browser will all of a sudden set a minimum font size by default which would start making the issue widespread. We witnessed this with an older version of the Facebook built in mobile browser for a while - we had no way of understanding what was happening or properly testing the issue. We will try to find the best path forward to avoid this problem in the future.
1 Like
Hey @alexander
Thanks so much for the updates, not quite there yet, but it’s great to know the team is taking it seriously.
I must say I’m still at a loss as to why its only occurring on some users Chrome Browsers and not others… I’ve had a look around re. disabling minimum font size but it seems like its an archaic issue with Chrome…?
Yeah, regarding the old Facebook/Instagram built-in browser, I think I was one of the squeaky wheels for that one as well haha…
Hopefully we see a resolution in the near future!
Cheers,
Sam
Thanks Sam. Even in the Chrome settings I had a hard time finding the right one. It’s kinda buried under a “Customize fonts” label. If you adjust that to something severe (anything over 6px) it exacerbates things even more. That setting can pretty much be found in any browser, so it’s up to the user what experience they unwittingly end up with. So it’s definitely not a bug in Chrome itself, just an uncommon configuration choice. Our biggest concern is that overnight Chrome (or any browser) could ship an update that arbitrarily sets a default minimum font size for everyone.
Hi Alex
Does this mean I’ve configured something manually at this end?
I’m still at a loss as to why this would be happening to some Chrome users and not others??
Cheers,
Sam