Horje
What causes text to render wrong in Chrome on a Mac (WPQuestions) - Wordpress Solution
[Solved] - What causes text to render wrong in Chrome on a Mac (WPQuestions) - Wordpress Solution
Try following codes
Once again, I am cheating. This is not a question about WordPress. Rather, this is a question about this site, WP Questions. Thao of FlippWP.com writes me and notes this problem that happens in Chrome on a Mac, when viewing this site. He wrote to me:
WPq's layout breaks on the single page version when viewed in Chrome-for-Mac. It's nothing major, but it's just a majorly inconvenient place because the question text doesn't wrap, and gets hidden behind the sidebar. I've included a screenshot. ... I've been following Wpquestions for some time (maybe 12 months), and I've seen the exact bug (the text flowing behind the sidebar) in every version of Chrome along the way. I was using Version 8.0.552.5 dev when I wrote to you yesterday, and just updated to v9.0.570.0 dev. I still see the same bug on many pages. (screens attached)
Any thoughts about what causes this?

Solution - 1

I'm on google chrome for mac right now and I can tell you this bug doesn't exist. I've been on the exact post of the screenshot and no problems. The guy may have a plugin or some other stuff that is causing the problem. Actually if you take a look on the screenshot you will see he has lots of plugins activated.


Solution - 2

Well I reported this bug to Lawrence, now that I've looked into it (which I should have done before reporting it) I've found the cause (which might be me!). Though I still though I'm not yet sure of the solution. And Lawrence if this is *just* an issue for me, I'll refund you the $5. Chrome is actually overriding WPquestions .details class via a "user stylesheet" which declares "white-space: nowrap" on its own "details" class as so. (screenshot attached)

.details {
white-space: nowrap;
}
Now I *swear* I have never added a user stylesheet to Chrome? Ever. So I'm just looking into where this is located, if it's shipped default with Chrome (which I doubt).


Solution - 3

No, actually I think this could happen. This is because of the code box that's present in that question. The #content container has a width 660px, #question-details has a left and right padding of 25px. The code box was given a width of 600px and 16px left and right padding;

.details pre, .answer pre, .confirm2 pre {
width:600px;
}
pre {
padding:16px;
}
The #content container does not have enough width to contain the code box. You should either reduce the with of the
.details pre, .answer pre, .confirm2 pre {
width:600px;
}
or reduce the left and right padding of
pre {
padding:16px;
}
to at the most 5px. Notice that the code box in the question was not centered properly. In some cases this could cause this scenario.


Solution - 4

Well, I have no Mac to see this, but it looks like a css issue. Try maybe to have the div id="question-details" or the div class="details" a fixed narrower width or padding/margin on the right. In order to catch only chrome , add this on the bottom of the site's css file


@media screen and (-webkit-min-device-pixel-ratio:0)
{
 .selector
 {margin: 0; }
}
In this example, the div class selector will have margin 0 , only for chrome.

Date: 2022-10-21 05:19:43
Category: Wordpress
More for You