I have found a bug which is causing the launch of two of my clients site to be put on hold while I resolve.
The word-spacing in the H1 heading is removed when it is linked to the name of the collection item. This is happening on the collection item page and only when viewing on an iOS mobile.
Here are two screenshots using exactly the same text - the first image is static text and renders as expected, the second is the heading linked to the name in the collection and the word-spacing disappears.
Hi @roblewi5 thank you for posting this! Hope we can get this resolved asap so you can get those sites launched!
I’m having some trouble reproducing that behavior on my end/understanding what’s causing the behavior as it looks like you don’t have an H1 that’s wrapped with a link block but maybe I’m misunderstanding the issue?
I see that you have a style to to reduce letter spacing by 1 pixel between letters in the H1:
Sorry I wasnt clear in the description, when I said ‘linked’ i meant the H1 text is retrieved from a collection. (In this case the ‘Name’ field form the ‘Insurances’ collection. (There is no actual clickable link.)
Things i have tried:
Tried using different bold fonts but the same situation happens.
Deleted all instances of the headline ‘H1 Hero’ and cleared it from the Style Manager. Then built the heading again calling it ‘H1 Hero 2’
Used custom code word-spacing but this didn’t work.
Unfortunately, I do not have the Woff version of this font. I am going to use a different font family (a more familiar one) throughout the site and see if that fixes it.
This is slightly concerning and is interesting it only happens when the H1 Hero 2 heading is connected to the collection. I have been researching iOS word-spacing bugs to no avail.
Would appreciate any further information you may have. I would be surprised if this is the first time this has happened to any one.
Thanks for helping and great that you can replicate the problem.
Ok so I converted the Museo Sans 900 Italic (as that is the one used by my H1s - and only one with a problme) to a WOFF file. I replaced the OTF with the WOFF in the Project Settings.
I then went into the sight and set ‘All H1 Headings’ to the Museo Sans 900 Italic again. I can only assume it is now using the new WOFF file.
Have re-published but the problem remains.
It only happens when it pulls the name from the collection. Very strange. What do you think?
I was going to take the medicine and change the font-family throughout the site. I noticed a few other fonts I tested with had the same problem though so.
No worries. Would be nice to find the problem wherever it may be.
Impact and Montserrat are to name two. It appears only the bolder weights it happens too.
However, if I use Arial bold, the word-spacing is as expected.
I will change the site’s fonts once in a few hours and will let you know how I get on.
This must be a bug of some sort. And would imagine it be part of the ‘Name’ field in the ‘Insurance’ collection.
Any suggestions? Only thing I can think of is re-building the collection but would rather hear what you think first as that will be a bit of work.
Rob
P.s. I have a duplicate site (same template) and the problem still exists but not as much - the ‘MOT Test Centre Insurance’ page under insurances has no word spacing.
I’m not sure how the client is entering the information into the CMS (I can only assume copying and pasting), but when I re-type the ‘Name’ field it fixes the word-spacing problem.
This is Awesome! Thank you for looking into this and uncovering that issue!
Copying and pasting content from other applications can carry over unwanted styles but this is the first time we’ve seen it affect styles in this manner.
