Box-Shadow Not Shown on Safari Mobile on iOS 7 (In Landscape)

Box-shadow not shown on Safari Mobile on iOS 7 (in landscape)

Adding border-radius: 1px fixed the problem:

h1 {
    box-shadow: 0 4px 9px -8px #000000;
    border-radius: 1px;
    color: #D95B43;
    height: 1.2em;
    margin-top: 0;
    font-size: 1.3em;
    padding: 10px;
}

From: https://stackoverflow.com/a/21323644/1565597 .

Remove textarea inner shadow on Mobile Safari (iPhone)

By adding this css style:

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

As per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Are there any workarounds for this Mobile Safari box-shadow bug?

I submitted this issue to WebKit's bug database as well as Apple's. It is confirmed that this is indeed a bug and Apple is aware of it. Hopefully it will be fixed in the next update to iOS 7.

CSS fixed column on table disappears on iPhone web browser

I started removing your code piece by piece to see when the problem goes away. Removing <div class="mscroll"> made the problem go away. So I took closer look at the css and from there the problem seems to be in:

-webkit-overflow-scrolling: touch;

Remove that from .mscroll and it will work on iphone.

I did my best on trying to understand why this happens. But I don't seem to find any reason for it. I would assume, that your code is a bit messy and probably there is a conflict somewhere.

position: fixed doesn't work on iPad and iPhone

I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

We now have a solid re-write that provides true fixed toolbars on the
a lot of popular platforms and safely falls back to static toolbar
positioning in other browsers.

The coolest part about this approach is that, unlike JS-based
solutions that impose the unnatural scrolling physics across all
platforms, our scrolling feels 100% native because it is. This means
that scrolling feels right everywhere and works with touch, mousewheel
and keyboard user input. As a bonus, our CSS-based solution is super
lightweight and doesn’t impact compatibility or accessibility.

---

Related Topics