Bug 206024 - Thin line sometimes shown above heading on twitter.com
Summary: Thin line sometimes shown above heading on twitter.com
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: Unspecified iOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-01-09 12:23 PST by Kenneth Kufluk
Modified: 2024-05-02 01:32 PDT (History)
6 users (show)

See Also:


Attachments
Screenshot of Twitter on my iPad showing the line at the top of the site. (1010.35 KB, image/png)
2020-01-09 12:23 PST, Kenneth Kufluk
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Kenneth Kufluk 2020-01-09 12:23:30 PST
Created attachment 387254 [details]
Screenshot of Twitter on my iPad showing the line at the top of the site.

Hi. I'm a web engineer on twitter.com.

I have found an infrequent rendering bug when using iPhone or iPad with mobile.twitter.com.
I use dark mode on the OS and on twitter.
I scroll my home timeline. When scrolling stops, I sometimes see one pixel of rendering from the timeline under the top header, appearing above the header.
This is most apparent when there is a bright image in the timeline.

This bug either does not appear, or is much less apparent, when the phone is not in dark mode. I suspect it is less apparent.

I have made a reduced test case here:
https://clumsy-biplane.glitch.me (make sure your phone is in dark mode)
The bug appears far less frequently in the reduced test case. Perhaps 20-30 scrolls up and down might be needed. I find the line only appears after the scroll moment has finished.

By comparing screenshots, I believe the line is an additional line, because I measured an extra 1px between the top of the screen and the text in the header.
Comment 1 Simon Fraser (smfr) 2020-01-09 12:41:57 PST
Probably a rounding error in the positioning of the position:fixed header.

Does the patch have a meta viewport that gives it unit scale (width=device-width)?
Comment 2 Kenneth Kufluk 2020-01-09 13:04:00 PST
Yes, reduced test case has 
    <meta name="viewport" content="width=device-width, initial-scale=1">
Site has
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
Comment 3 Radar WebKit Bug Importer 2020-01-09 23:38:34 PST
<rdar://problem/58471889>
Comment 4 Karl Dubost 2024-05-02 01:32:41 PDT
@Kenneth,

Spring Cleaning. 
I don't seem to be able to reproduce this issue.