search

Alhadis / Accordion

Silky-smooth accordion widgets with no external dependencies.
https://www.npmjs.com/package/accordion
ISC License
32 stars 11 forks source link

Strange type rendering issue with Chrome 55 / Mac 10.10.5 #7

Closed blimpmason closed 7 years ago

blimpmason commented 7 years ago

Hi I'm wondering if you can reproduce the issue I'm seeing below: https://landofwomen.com/pages/united-states-stores

Notice in the screenshot attached "Arizona", the first accordion section title, appears a lighter weight font. It's fairly consistent on this page but I've noticed it elsewhere less consistently. The issue goes away if I resize the browser window or toggle certain .accordion css attributes using the inspector tool (like backface-visibility and transform), but actually commenting them out does nothing after a full page refresh.

screenshot 2017-01-10 12 40 21

I'm running Chrome 55.0.2883.95 on Mac OS 10.10.5.

Let me know if you have any thoughts!

Thanks

blimpmason commented 7 years ago

I should clarify that in this example, "Arizona" is the only section title that is rendering correctly — all the other heavier titles should actually appear as light as that first one does.

Alhadis commented 7 years ago

Hey mate!

I'm afraid I can't reproduce this on my end; it looks perfectly fine:

Figure 1

This is on Chrome 55.0.2883.95, Mac OS 10.12.2. I'm using a double-density MacBook pro, though... what pixel density is yours?

blimpmason commented 7 years ago

I'm seeing it both on my external display which is standard pixel density and also on my internal Macbook Pro retina display (though it's much less pronounced on the retina display). It's really strange! I wonder if it's a Yosemite-related bug. Just to be sure maybe you could refresh once or twice to make sure you're not seeing it?

Alhadis commented 7 years ago

I refreshed several times, and each yielded the same result, I'm afraid. :(

Is the Arizona element receiving a style attribute that applies a 3D transform? The opening tag should look like this when closed:

<div class="region closed" style="transform: translate3d(0px, 0px, 0px); height: 55px;">
blimpmason commented 7 years ago

Yes it is getting that - I think it may have something to do with the 3d transform — check this out: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

But I just tried testing on Browserstack and couldn't reproduce even with Yosemite/Chrome 55, which is strange because I'm seeing it on 3 different computers. Maybe it could even be linked to the hardware graphics card.

Anyway thanks for looking into it!

Alhadis commented 7 years ago

Well, the only other thing I can think of is that it's a problem with the font being used to render the text... :\

For me, the page is loading two fonts, both WOFF2:

Figure 2

I trust there's nothing amiss?

blimpmason commented 7 years ago

I've seen this on other projects as well, with different fonts being loaded — on one the only solution was to turn off the smooth transitions as the accordion sections open (the client was seeing it too so I had no alternative, even though that sort of defeats the purpose of this library). It may have something to do with the webfont kits that myfonts.com prepares, but it's definitely not specific to the Land of Women fonts.

Alhadis commented 7 years ago

That's possible.

As a kludge, you could try dispatching a bogus resize event on the window after initialising the widget (perhaps with a brief delay), if just to get every element looking more even (since you said the effect goes away if the window is resized). Other than that, I'm afraid I can't be of much help here. :( This issue looks to be well beyond the scope of this component.

Alhadis commented 7 years ago

@blimpmason How did you progress? Did you end up resolving this issue? =)

I'm about to cut a patch release in the next day or two, so if there are any modifications needed on my end, I can get them published with v2.1.1.

blimpmason commented 7 years ago

Hey, thanks for following up and sorry for the slow response. I ended up disabling the CSS3 animations as that was causing the type rendering issue, but obviously not the most ideal solution. Were you ever able to reproduce it? In the meantime I've reverted to this old jQuery plugin:

https://github.com/danielstocks/jQuery-Collapse

Though I'd much rather be using Accordion!

Alhadis commented 7 years ago

Ah no, sorry... I'm still uncertain as to whether or not it's CSS-related, or font-related. Did you witness a similar phenomenon with other typefaces? Also, is the rendering bug still affecting this page? I can't see any change to the CSS that's used to animate the sections.

Though I'd much rather be using Accordion!

Haha, thank you! I'd rather you were, too. ;)

blimpmason commented 7 years ago

The bug is still affecting the landofwomen.com page (only on Mac OS 10.10.5 and Chrome 55), but I disabled the animations on this other project and the rendering issue went away:

https://www.flyby.co/pages/faq

blimpmason commented 7 years ago

It's definitely some interaction between Accordion, Chrome, and the OS. I thought it might be related to this issue that sometimes happens to elements whose parents also have animation transitions:

https://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition

Alhadis commented 7 years ago

Do you get a different result if you enable noTransforms?