Search code examples
ioscssiphoneresponsive

CSS not being applied on iOS devices

I'm having a weird rendering issue on iOS devices

this is the website - http://dev.makeyourownbottle.com

Relevant CSS:

.bottle-images {

    display: inline-flex;

}

.bottle-images img {
    width: auto;
}

.bottle img {

    width: 100%;
    padding: 0;
    position: relative;

}

.bottle p {

    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    top: 19%;
    color: #006699;
    font-weight: 700;
    padding-left: 2px;
    margin-top: 2.4em;
}

.bottle {

    margin: 0 2px;

}

Relevant HTML:

<div class="bottle-images"><span class="bottle"><img src="/images/first-b.png"><p>1</p></span><span class="bottle"><img src="/images/second-b.png"><p>5</p></span><span class="bottle"><img src="/images/third-b.png"><p>7</p></span></div>

I'm having a problem where the numbers that rendered in front of the bottle images are not consistently showing on top of the bottles

I've tested various phone models through browser stack and it's definitely an iOS issue , it's not happening on android, it's not happening on windows or MacOS

enter image description here

Note that the website was tested in apple stores using different devices mid-late July 2018 - where we didn't have this issue at all - it just suddenly propped up now

  1. On the iPhone X - it sometimes fixes itself after the CSS loads (after about 1-2 seconds) , sometimes it doesn't. - as shown in the image, I just loaded the site and it rendered correctly, other times it does not.
  2. As shown in the image for iPhone 8, the numbers are out of place on initial load, on iOS Chrome, moving up and down the screen immediately corrects it, on Safari it does not - this is consistent for iOS 7,8,8 Plus that I have tested - iPhone X sometimes displays correctly on initial load.
  3. Opening Dev tools on browser stack immediately fixes it - so I don't know what to check ( as soon as tools window opens, it aligns properly )
  4. Sometimes clicking refresh on the browser fixes it for subsequent re-loads, other times it keeps messing the numbers on each reload

enter image description here

I have moved the CSS around, moved the classes to the top of the CSS to see if that has any impact, it didn't change anything

I cannot determine the cause for it because as soon as I open developer tools , it just fixes itself - seems like some internal rendering bug in iOS ?

I'm unable to determine the cause / reason for this - anyone has any suggestions ?

Solution

  • I think this might be caused because of the inline-flex option.

    Try this:

    .bottle-images {
    /* display: -ms-inline-flexbox; */
    /* display: inline-flex; */
    width: 84px;
    margin: auto;
}

.bottle-images:after {
    content: ' ';
    display: block;
    clear: both;
}

.bottle {
    margin: 0 2px;
    float: left;
}

    Just update your css like this and let me know if this worked. Hope this helps.