Safari issue: cutting off text on scroll

I’m finishing up development on a site and I noticed something weird happening in Safari 5.0.3 on XP: text above or below the visible portion gets cut off when I scroll, but the full text will reappear on refresh or when you select a potion of text (and only for that portion).

I don’t know if this is a browser bug or an issue with the CSS… I’m picking up where the original developer left off and I’ve never noticed this happen with any site I’ve developed before. Google tells me nothing useful (just a bunch of people complaining about how their iPads work). Also, I just updated Safari last month so I’m sure this is the latest version.

Hopefully this is the right place for this topic… Since I don’t know what the issue is it’s hard to pick the right forum.

Hmm, something went wrong with that attachment. Can you post it again, or provide a link?

Sorry, here it is Ralph.

I’ve looked through the CSS and HTML and nothing stands out as being unusual. Safari isn’t my default browser so I’m not aware if there are certain circumstances where this would happen. :confused:

Edit: Also, it’s always the top half that get’s cut off to varying degrees. Sometimes it’s just a few pixels shaved off the top, sometimes there’s only a sliver of the bottom left.

Hmm, I haven’t seen that before, but no doubt someone else has. I could only guess at the cause without seeing some code. Can you either provide a link, or post some sample code that behaves the same way in Safari? My first thought was a line-height problem, but if it’s only happening when you scroll, that seems less likely.

The CSS is a bit weird. The guy who started it used this “Reset” style sheet to reset everything (which may be the cause - I’ve had some wonky issues with it in the past) and I also don’t really agree with his font sizing choices. There’s also divs floated all over the place, but I’ve never had an issue with floats affecting text display unless they’re overlapping.

These are the only styles that are applied to all the paragraphs on all pages. I haven’t tested it to see if that’s the offending code since the computer I’m on right now doesn’t have Safari on it. Plus it seems to me to be a browser bug. I was hoping someone has seen this before and it’s just some quirky, known code combination that’s causing it.

html, body { font-family: Helvetica, Arial, sans-serif; font-size:11px;}

p { line-height:1.4em; font-size:1.1em; padding-bottom:14px;}

Reset CSS:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	/*font-family: inherit;*/
	vertical-align: baseline;
}

I doubt that code would cause a problem in Safari, but if it is, it would be the conflicting font-size rule on the body. It’s set twice, here

html, body { font-family: Helvetica, Arial, sans-serif; [COLOR="Red"]font-size:11px;[/COLOR]}

and here

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    [COLOR="Red"]font-size: 100%;[/COLOR]
    /*font-family: inherit;*/
    vertical-align: baseline;
}

Personally, I’d remove font-size:11px;, as it will only cause trouble. The 100% setting is better.

Ok, I did some testing when I got into work this morning. It looks like the Helvetica font is causing this issue. Which is sad because I think Safari has the best font rendering most of the time.

Yeah, I don’t know why font-size:11px was chosen as that’s just awkward - will definitely be changing that.

I have the exact same problem with the header here: http://deefdev.com/fpk/ (Safari 5 OSX). I wonder whats causing this.

I don’t see any problem on that page in Safari.

It doesn’t happen every time. I had to scroll up and down a few times to replicate it :slight_smile:

I can’t replicate that either in Safari or FF. Perhaps what you are seeing is a Typekit issue with Macs? The only thing I noticed was when the header font changed/loaded.

The cutoff is visible in Safari 5.0.3 Mac also. When clicking out of the window it re-renders correctly.

Have you tested with a different Typekit font?

I just tested it with a couple of other fonts (some of them from the same foundry as the first one) and i don’t get the same clipping. It must be a font-specific issue. Its weird that it renders correctly a soon as I switch windows.

I’ve no more suggestions to offer, only this observation: in Safari (5.0.3 Mac) the cutoff doesn’t occur when scrolling by clicking the scroll arrows, only when dragging the scrollbar.

I tested it in chrome and get the same problem, so i guess its webkit-related.

Maybe it’s worth moving the padding from the H1 to the header. The font is partly sitting in that padding area, which could be causing a problem.

It doesn’t seem to help. I tried using line-height to make sure the text stays inside the h1 block but it still gets cut of at the top.

This is an old thread, but I wanted to thank huit for posting your test results. I was having this same issue and indeed switching Helvetica to Arial solved my problem.

I know this is a locked thread, but I’ll post this anyway… If you’re a Windows user and you’ve found a “free” version of Helvetica on the Web, you haven’t got the real version, but one of a number of very wonky, problematic faux-fonts that cause a LOT of display problems (only on your computer). I had some trouble with this a couple of years ago, and after uninstalling the faux-Helvetica, things were okay again. This may not be exactly the situation you faced, but it’s worth posting, as the real Helvetica is as stable a font as there is, and shouldn’t cause any display problems. Just tossing it out there for future reference. Let’s keep this thread closed! :slight_smile: