Home/ Questions/Q 7529697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T04:43:37+00:00

I have a painful issue CSS issue which appears to be caused by the

  • 0

I have a painful issue CSS issue which appears to be caused by the Disqus CSS.

The Disqus CSS seems to cause my page’s main content text to randomly change sizes in parts. Clicking refresh will randomly make some text bigger, some smaller and some bold. It only seems to occur in Safari on the iPhone (real and simulator) and is fine in Firefox, IE, Android and iPad Safari. Turning off Disqus comments fixes the issue. I have tried changing Disqus themes and turning mobile view on and off.

Below you can see the same page being rendered differently every time I click refresh (live site-it should look like this)

Random styling
Same page after refresh

Any help would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could try applying the -webkit-text-size-adjust: none; and targeting the Disqus code? If I remember Disqus doesn’t use iframes, so it should work if the hierarchy you use is stronger than theirs.

    More info here:
    http://css-infos.net/property/-webkit-text-size-adjust

    Hope that helps 🙂

    Edit: I just had a thought while writing that comment below. You may be able to sort this by setting the viewport width, either explicitly or to device width.

    For example, this will make the viewport on an iphone be 320px wide in portrait and 460px wide in landscape (I think that’s right?).

    <meta name="viewport" content="width=device-width, initial-scale=1">

    From the screenshots I think that is actually too small though, so something like this may be better.

    <meta name="viewport" content="width=800, initial-scale=1">

    This is actually why the text size changes in the first place. The iPhone scales that 800px to fit both portrait and landscape. In portrait though that could make the font far too small so it is increased.

    See here for more info: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

    • 0