Letter spacing issue in Chrome

[typo_78]

I have a situation. In a few words, letter-spacing css property I think that is messing around in the last stable version of Chrome 45.0.2454.85 m (64-bit) and I can’t deal with this:

Version 44.0.2403.155 (64-bit)

Version 45.0.2454.85 m (64-bit)

The strange thing is that I’ve made a simulation in codepen using letter-spacing css property, that looks fine in old/new Chrome versions, could be other triggers generating this issue?
Codepen here

Live link here. Any thoughts? Thank you,

[mhodges44]

Assuming you don’t want to change the max width of the container, simply putting a letter-spacing of -40px on .logotext-d puts it all on 1 line. Text wraps past ~855px screen width, but based on how the logo is laid out in general, that doesn’t seem to be a concern.

[typo_78]

Thank you for your feed-back, indeed it works all letters are all on 1 line but, the letters are not placed close to eachother, the negative letter-spacing css property is still ignored in v45.0.2454.85.

LE: could be something related to a possible update that was made to the following property in Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) ?
If I change the 0 value with 2 for example, it’s almost like it should be except the distance between the first two letters.

[mhodges44]

Seems to be a known issue, as you have mentioned. One hack-ish way to fix it until the chrome bug is fixed is to simply put a negative margin on each of the letter spans – it will have the same effect as negative letter spacing. Hope chrome resolves the issue quickly.

Margin-left: -10px seems to give the appearance you are looking for.

[typo_78]

Thank you all, good to know, I really appreciate it. @mhodges44 Btw, where did you have read about this issue? I mean, It’s a confirmed bug?

[Mottie]

Add this to the css:

.logo { white-space: nowrap; }

This will prevent the letter wrapping, but if the browser window gets too narrow, it will add a horizontal scroll bar.

[typo_78]

Good to know, thanks; btw, this will not solve the unwanted space issue of Chrome v45 inserted between letters.

[typo_78]

@Shikkediel Could you be so kind and post a print screen please with the logo area? thanks

[typo_78]

Codepen looks fine in my side too including v45 Chrome 64-bit. How about live link?

Plese take note:
At this moment the code is updated with mhodges44 solution. In Chrome console, Sources
/wp-content/themes/notio-wp/assets/css/selection.php?id=35, If you remove margin-left: -10px; /* update for Chrome 45 issue */ css lines, u should notice the issue.

Could you be so kind and post ur Chrome 45.0.2454.85 m 32-bit screenshot? Thanks

[typo_78]

That’s it :) When you said “All seems to work fine on a 32-bit W7 machine with latest Chrome.” I thought that is fine in 32-bit but as we can see, is not.

all clear now, without mhodges44 solution margin-left: -10px is not working at all (even in 32 bit v45); Thank you.

[typo_78]

True, I suppose that being implemented in WordPress could be a reason;

[Author]

Posts