asked on
Odd gray line appearing when scrolling my screen on iPad
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.
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.
CSS
Last Comment
Brad Bansner
ASKER
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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!
As we're hacking probably setting it like this should make it better:
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!
border:1px solid transparent;
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!
ASKER
Thanks again! Your advice led to a solution, so it was helpful.
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?