Solved

iOS scrolling over fixed element buggy, missing background color

Posted on 2014-10-24
2
396 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 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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
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
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.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 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