website testing on ios

Gallex · 2021-03-29 08:25:09

hi iphone owners!

could you please test this site and give me a feedback?
you should see this and scrolling down, product list on white background should appear.

phiw13 · 2021-03-29 08:53:47

If I understand you correctly, what you describe is what I see here on an iPhone SE (1st generation). Loads fast too (on my WIFI network…).

Gallex · 2021-03-29 09:27:11

phiw13 wrote #329560:

If I understand you correctly, what you describe is what I see here on an iPhone SE (1st generation). Loads fast too (on my WIFI network…).

thank you! white background appears on scrolling also?

jakob · 2021-03-29 13:16:12

Gallex wrote #329559:

could you please test this site … you should see this and scrolling down, product list on white background should appear.

I have looked here on an iPhone 11 running OS 14 and it does not look like your mockup, I’m afraid. I just see the blue background: but no text or images or yellow corner flash: screenshot. That does show on the Russian language version but there the layout is a bit different.

The white background with nine items follow below it. The product pictures are not full width. That looks like this screenshot.

phiw13 · 2021-03-30 02:59:53

Gallex wrote #329561:

thank you! white background appears on scrolling also?

Yes, the white background and all products show up. But now I checked on my partners iPhone 12 mini and I see the same issue as Jacob saw: the blue background box is empty (and a reload on my SE now shows that as well – odd did you change something ?).

Hooking up the iPhone to the iMac in order to use the Webkit inspector, it shows: .header-curtain-2{} (wrapper around what I think is a slide show) to have a computed value of display: none – set at line 1388 of the stylesheet.

Gallex · 2021-03-30 12:05:03

thank’s guys for feedback!

jakob wrote #329562:

I have looked here on an iPhone 11 running OS 14 and it does not look like your mockup, I’m afraid. I just see the blue background: but no text or images or yellow corner flash:

it should show like you and i can see in that testpage

css of that background image:

front-bg {
    background-image: url(/images/141.jpg);
    background-position: center top;
    background-attachment: fixed;
}

The white background with nine items follow below it. The product pictures are not full width. That looks like this screenshot.

am i understood correctly – you both can see product list with white background below the blue picture?

changed a little – any differences?

phiw13 · 2021-03-31 07:21:13

Gallex wrote #329596:

it should show like you and i can see in that testpage

css of that background image:

front-bg {/*…*/ background-attachment: fixed;

aha… Here is your problem: background-attachment: fixed;. Safari on iOS does not support this value (see caniuse for confirmation). If I change it (through the inspector) to background-attachment: local;, everything works mostly as I think you intent — the pinned down effect with the white-background product list sliding “over” the blue background image does not seem to work in any way.

Gallex · 2021-03-31 13:03:23

phiw13 wrote #329607:

aha… Here is your problem: background-attachment: fixed;. Safari on iOS does not support this value (see caniuse for confirmation). If I change it (through the inspector) to background-attachment: local;, everything works mostly as I think you intent — the pinned down effect with the white-background product list sliding “over” the blue background image does not seem to work in any way.

deleted background-attachment: fixed;
How now -phiw13?

phiw13 · 2021-03-31 13:13:27

This is what I see now on the iPhone SE (after scrolling a little)

Gallex · 2021-03-31 13:44:56

phiw13 wrote #329615:

This is what I see now on the iPhone SE (after scrolling a little)

looks correct. :)

Textpattern CMS

Textpattern CMS support forum

#1 2021-03-29 08:25:09