?
Solved

iOS scrolling over fixed element buggy, missing background color

Posted on 2014-10-24
2
Medium Priority
?
408 Views
Last Modified: 2014-10-25
I have this very simple HTML document (code pasted below):
http://secure.bbdesign.com/shoperenowharton/test.htm

Here is what is happening on my iPhone 5s (and also an iPad):

1. The blue box is positioned below the screen, so I can't see it on page load.
2. I hold my finger on the screen and drag/scroll so that the blue box enters the screen.
3. The background of the blue box is MISSING at this point.
4. I remove my finger from the screen, the blue box appears as it should.

I would like the blue box to hold its background color even while scrolling. This appears to be a problem between the interaction of the fixed element and the relative element scrolling overtop it. It also only happens if the element is off the screen before you begin scrolling (i.e., the red box does not have this problem).

I also note that if I REMOVE this line from my markup:
<meta name="viewport" content="width=device-width, initial-scale=1">

Open in new window


...the problem disappears. Is this a bug in iOS? Or something I can fix by adjusting the viewport or CSS?

Thanks for looking!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;"></div>

<div style="position:relative;background-color:#c00;">
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
</div>

<div style="position:relative;background-color:#00c;">
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
	<p>Test page.</p>
</div>

</body>
</html>

Open in new window

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
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 40402921
It is a bug that has to do with the wat webkit (the rendering engine for Safari) flows the styles when doing a re-paint.  It also will happen sometimes in Chrome even though chrome uses the webkit fork blink for newer versions.  Unfortunately the bug is a little inconsistent and seems to be affected by the way the browser pares during the layout portion of processing.

If removing the line solves it without causing other problems, I would go with that.

Cd&
0
 

Author Comment

by:bbdesign
ID: 40404290
Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

743 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