Solved

iOS scrolling over fixed element buggy, missing background color

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS Memory Management app 5 37
Getting Column Height to Match Other Column 5 44
Firmware for ISR4321 Router 6 33
CSS z-index issue 3 20
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.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now