Mysterious Horizontal Lines on My Site When Rendered on Ipad

Mysterious horizontal lines on my site when rendered on iPad

Oops - how did that happen?

The meta to go in the head tag to to stop zooming on the iPad:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Why do white lines appear in my canvas when rendered on my iPad (Safari and Chrome)?

Here is a workaround that appears to work:

c.style.zoom = c.style.zoom == "100%" ? "100.0001%" : "100%";

after each update.

Thin gray/black lines on web page viewed with iPad

I tried a bunch of fixes to remove these grey-ish tiny lines when mobile-safari was zoomed in, and the simplest and most flexible fix I found was here:

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

Essentially, you add

margin-bottom:-1px;

To elements that are getting phantom line borders added.

Why is my text string line-breaking in a strange way? (HTML / CSS)

Using custom :before and display:table-cell, check below

/* https://stackoverflow.com/a/3428477/421797 Makes sure the Browser isn't trying to perform its own magic.  Also, You can debug this in the simulator by looking here for how to do that: https://stackoverflow.com/a/43771390/421797  */
@media screen and (max-device-width: 480px) {  body {    -webkit-text-size-adjust: none;  }}
body {  padding: 20px;  padding-right: 5px;  margin: 0px;}
#content {  padding: 0px;  color: #46484d;  background-color: white;  font-family: Helvetica, sans-serif;  font-size: 17px;  line-height: 27px;  letter-spacing: -0.24px;}
p {  padding: 0px;  margin: 0px;}
a {  color: #3d78fe;  text-decoration: none;}
p.header {}
p.footer {}
ul {  list-style-position: inside;  list-style-type: circle;  padding-top: 16px;  padding-left: 8px;  padding-bottom: 5px;}
ul li {  padding: 15px 0px 15px 20px;  word-break: normal;  word-wrap: normal;  display:table;  position:relative;}
ul li:before {  position: absolute;    top:calc(50% - 3px);    margin: 0px 0 0 -12px;      vertical-align: middle;  display: table-cell;  width: 6px;  height: 6px;  border:1px solid #000000;  content: "";  border-radius:100%;}

/* How to center the bullet vertically with the content: https://stackoverflow.com/a/31966278/421797 (You also have to wrap your li content in a span tag!) */
li span {  display: table-cell;  vertical-align: middle;  padding-left: 16px;}

/* How to choose different images depending on screen properties https://www.html5rocks.com/en/mobile/high-dpi/ */
ul.bullets {  list-style:none;}

<meta name="viewport" content="width=device-width; initial-scale=1.0;" /><div id="content">  <p class="header">    Blahblahblah, I redacted this for our product in test.  </p>  <ul class="bullets">    <li><span>Datenkategorien</span></li>    <li><span>Zwecke der Datenverarbeitung</span></li>    <li><span>Empfänger personenbezogener Daten Empfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener Daten</span></li>  </ul>  <p class="footer">    Etwas unklar? <a href="getInTouch">Schreib uns.</a>  </p></div>

Background image jumps when address bar hides iOS/Android/Mobile Chrome

This issue is caused by the URL bars shrinking/sliding out of the way and changing the size of the #bg1 and #bg2 divs since they are 100% height and "fixed". Since the background image is set to "cover" it will adjust the image size/position as the containing area is larger.

Based on the responsive nature of the site, the background must scale. I entertain two possible solutions:

1) Set the #bg1, #bg2 height to 100vh. In theory, this an elegant solution. However, iOS has a vh bug (http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/). I attempted using a max-height to prevent the issue, but it remained.

2) The viewport size, when determined by Javascript, is not affected by the URL bar. Therefore, Javascript can be used to set a static height on the #bg1 and #bg2 based on the viewport size. This is not the best solution as it isn't pure CSS and there is a slight image jump on page load. However, it is the only viable solution I see considering iOS's "vh" bugs (which do not appear to be fixed in iOS 7).

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

On a side note, I've seen so many issues with these resizing URL bars in iOS and Android. I understand the purpose, but they really need to think through the strange functionality and havoc they bring to websites. The latest change, is you can no longer "hide" the URL bar on page load on iOS or Chrome using scroll tricks.

EDIT: While the above script works perfectly for keeping the background from resizing, it causes a noticeable gap when users scroll down. This is because it is keeping the background sized to 100% of the screen height minus the URL bar. If we add 60px to the height, as swiss suggests, this problem goes away. It does mean we don't get to see the bottom 60px of the background image when the URL bar is present, but it prevents users from ever seeing a gap.

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

---

Related Topics