Problem with Web page display on iOs Safari

HTML & CSS
1

Hello,

I think there is a bug with Apple iOs Safari regarding placement of cursors in Text Input fields.
And would like to know if you all have a work around to this issue.
So we have a Website with responsive design for display of Web content under Mobile phones.
The problem is with cursors being outside of the Text Input fields in case of Apple iOs.
Note: the cursor display works fine under Android.
You can see it by going to www.notefab.com via your iPhone. Once their click on the “More App” triple bars on upper right corner which cause more features panel to slide out. Then click on “Log-in” button.
You will see that the log-in panel pops up, but when you try to type in your password the cursor is all outside of the input filed causing the whole form not to work!
What the HEK Apple :frowning:
Do you have a solution for this?

Thanks,

2

That page has been on borrowed time for a while. My guess is that Apple iOS Safari is not supporting obsolete attributes that have long been deprecated.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.notefab.com%2F

Yes, update the HTML

3 Likes
3

Yes:

https://bugs.webkit.org/show_bug.cgi?id=176896

1 Like
4

So I was right. This is an “iOS-related bug”.

Paul do you have any ideas for solving this bug with Apple iOS safari?
I looked at the above page you have provided, and the answers of course confirm this is an Apple iOS Safari bug, but how to address it is not clear.
To be exact, 90% of people I checked with Apple iPhone report seeing the log-in panel Ok, it is 10% that do not. So this Apple iOs bug affects like 10%. Still would like to find a work around idea.
Thanks.

5

Mittineague, I was right. This is an Apple iOS Safari bug as per link provided by Paul below too.

6

Paul,

We are having another iOS Safari related anomaly, and I was wondering if you had any idea how to solve that. This anomaly is that if you go to notefab.com on iPhone and you look at the parallel lines (icon) which which you click on results in the features panel sliding out, if you move the screen to the left you see residuals from the panel that slides in and out to the right of the actual display window! When the panel is in hidden (slide out mode) There should be nothing there since the Width of this sliding panel is set to Zero when in hidden mode (slide out mode).
So how do we get rid of those unwanted parts of the panel when in slide out mode? Which again should NOT be there since in Slide out mode the Width of parent DIV is set to ZERO.

Thanks,

7

I’m away until Wednesday and will have a look then if no one else has jumped in. You probably need to hide the overflow as anything off screen takes up room on a mobile viewport but I’m just guessing as I have no means for testing until I return.

The iOS cursor bug looks like a hard one to squash and you may need to switch to an absolute positioned login but I will test on my return.

8

Hi Paul,

No one has replied. So really looking forward to your ideas and suggestions.
FYI, the buttons on the sliding panel that residual of them shows when the panel is in slide out mode, their parent DIV does have overflow: hidden
But still Apple iOS safari is showing these residuals of these buttons when Panel is on slide out mode which is parent Width = 0!

And what do you mean exactly by using position Absolute to get around the Apple Bug in regard to cursor in input Text? Of course I know Position on CSS, but not sure how this would get around this Apple bug! FYI, I actually had these input Text fields displayed via Position Absolute, and this cursor bug was even worse! So switched to non Position placement, and using more basic CSS placement. But still as you can see the problem persists.

Thanks,
Dean

9

You need overflow:hidden on this element:

#mo_bar_slide{overflow:hidden}

The only fix I can see for the login menu is to make it absolute instead of fixed. As the header bar scrolls anyway it makes no sense to fix the login so the following change should fix the issue.


.pop_up_login{
position:absolute;
top:0;
}
10

Paul,

Both your suggestions were right on target. Good job man :slight_smile:

P.S., Cant believe that Applet has not still fixed this Position: Fixed bug with iOS Safari! And many other such bugs that Safari has on iOS. Makes you almost wonder that they have these bugs in iOS Safari to force you into native App from Web App which means Apple controlling rather than the Openness and Freedom of being on the Web.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.