Solved

iOS scrolling over fixed element buggy, missing background color

Posted on 2014-10-24
2
385 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
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Suggested Solutions

Title # Comments Views Activity
Under active page on navigation bar 8 16
How do I pull the base url for use in html links 7 31
Link failure 16 32
Effective CSS style applied to an element 5 13
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

840 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