?
Solved

Odd gray line appearing when scrolling my screen on iPad

Posted on 2014-01-06
6
Medium Priority
?
758 Views
Last Modified: 2014-01-07
This is a test URL for some iPad optimization I am doing on a website:
http://www.cherrystoneauctions.com/test

When you scroll down, the blue/black marble menu should "stick" to the top of your device window. When you scroll back up, it should "unstick".

If I hold my finger on the screen to drag scroll, and make the menu "stick", I end up with a gray line at the bottom of the "#fixnav" element, right below the menu.

If I flick my finger to auto-scroll instead of dragging, the gray line does not appear.

If I do the same thing using Firefox (on my computer, not iPad), I also see a gray line, but its not in the exact same place.

I don't see anything in my CSS that would create a border or background to cause that line to display. I am using jQuery/Javascript to add and remove classes, but everything else is CSS. Is there something I am doing wrong? Would appreciate any advice!

Thank you.
0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39761378
Hi mate,
I can't see any line on FF and I don't have an iPad to test that.

If you can reproduce it on FF, could you take a screenshot and point where the line is?
0
 

Author Comment

by:bbdesign
ID: 39761778
Screenshots attached. Thanks for looking!
Screen-Shot-2014-01-07-at-6.47.2.jpg
2.jpg
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 39761834
Sorry mate, I cannot replicate it on the PC.

My only guess is that it's rendering a border on the #fixnav element.
Can you try replacing the line 239 on main.css by this one:
div#fixnav.stuck{border: none;position:fixed;top:-2px;}

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bbdesign
ID: 39762022
That didn't fix it, but adding border:1px solid #fff did fix it. Must have had something to do with overlapping elements and background colors. I don't know why that fixed it, I don't really want a border around that elements, but at this point I'm fine with this. Seems to only happen on a few browsers/devices, so probably an anomaly. Thanks!
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39762028
As we're hacking probably setting it like this should make it better:
border:1px solid transparent;

Open in new window


Shouldn't make any difference from what you achieved but at least there's no actual border color...

Sorry I couldn't be more helpful.

Cheers!
0
 

Author Comment

by:bbdesign
ID: 39762045
Thanks again! Your advice led to a solution, so it was helpful.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question