Streaming live at 10am (PST)

Collection Page Item Word Spacing


#1

Hi Webflow,

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.

Please can someone take a look at this for me? @PixelGeek @cyberdave @samliew

This is very frustrating and struggling to find a workaround.

Thanks

Rob

Live link: http://motor-trade-insurers.webflow.io/insurances/consequatur-nostrum-fugit

Share link: https://preview.webflow.com/preview/motor-trade-insurers?preview=7257a334968400cfee0108ded104e300


#2

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:

I also noticed that you just have the OTF font version uploaded for that custom font, could you try uploading the WOFF font file type for better support please?

Could you please let me know what browser version you’re using by sending me your information from this page?

There should be a small share link when you visit the page which you can send to me.


#3

Hi @Waldo,

Appreciate you taking time to have a look.

The problem occurs ONLY when viewing a collection page (e.g. http://motor-trade-insurers.webflow.io/insurances/consequatur-nostrum-fugit) an iOS mobile. My system info is here: whatismybrowser.com/w/QKHNL5Z

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.

Rob


#4

Hi @roblewi5

Thanks again for posting about this. I was able to see the spacing issue, but was only able to reproduce it with the Museo sans font family on iOS.

I recommend using a font file converter to convert your OTF file to WOFF to see if this resolves the issue.

You also mentioned that you are going to try a different font family. Can you please let me know if this resolves the issue?

​Thanks in advance, and I’m standing by for your reply.


#5

Hi @Brando,

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.

Thanks,

Rob


#6

Hi @roblewi5

Thanks again for your help with this and for trying that WOFF font file.

I’ve passed all of this information along to our team and we will continue to investigate the issue.

What other fonts have you seen this issue with?

Please keep the feedback coming - we read and log every update so if you run into more strange behavior, please let me know.


#8

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.

Rob


#9

Hi @Waldo,

Hope you are well!

So… I have changed the font-family from Museo Sans to Montserrat (which is a widely accepted font).

And the result is exaggerated word spacing! But not just on mobile it is on desktop as well.
(e.g. http://motor-trade-insurers.webflow.io/insurances/combined-motor-trade-insurance)

Here is a screenshot of mobile:

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.

The share link for that is here if you want to look at that too: https://preview.webflow.com/preview/taxi-insurers?preview=b10d2d493f4e17ba5bc141579a13198e


#10

Hi @roblewi5

Thanks for testing this with Montserrat—I appreciate your help in figuring this out!

We are still investigating this issue and hope to have a solution soon. I’ll let you know as soon as I have more information!


#11

Thanks, @Brando. Good luck!


#12

Hi @Brando & @Waldo,

I have discovered the problem!

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.

Before & After:

Such a small problem but what a big difference in legibility! It HAS to be picking up hidden characters or paragraph styles or whatever it is.

Assuming he is copying and pasting from somewhere, I will ask the client where he is doing it from for further information.

Let me know if you want anything else from me.

I apologise if you’ve spent anywhere near as much time looking for this problem as I have.

Rob


#13

Thought I’d throw down a better example from where it affected desktop on the sister site.

Before:

After:

Fixed by just re-typing the value in the ‘Name’ field.

Rob


#14

Hi @roblewi5

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.

You rock :raised_hands:t4:


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.