I'm trying to make an app that renders in a webkit better to use with screen readers. It's mostly working well the only issue is the menu bar that appears at the bottom of the screen is not working correctly. When the app is scrolled to the top it works fine. BUt when it's scrolled down the box that appears around the button when tapped appears above the button. The box moves more the more the page is scrolled and double tapping does not activate it. Is there a way to tell the screen reader the element is in a fixed position?
Thanks for the help!
Related
Currently i am using Html 5 video, when i click on full screen button it eventually disturb the scroll position. Automatically, the scroll position point to the top.
I have created a scenario, it's working fine on the Firefox browser however the scroll get disturb when i use the chrome browser.
Note: Please scroll to mid before tapping on maximize button of the video
Please click on the below link for watching the demo.
Demo is here
`enter code here`http://jsfiddle.net/1re7jkLf/
Scrollbar disappeared when I add mouse to mac at first time.
please look at this links.
demo link
When I add mouse to my mac, scroll bar disappeared and a white color box coming right top corner. I do not know why. firefox working fine. chrome safari, and opera i.e had this issue. After refresh the page i could see scrollbar. Help me if you know/face this issue before.
screenshots here... who does not able to understand my issue.
screen shot one after i insert mouse to mac machine scroll disappeared and getting square box right top corner:
after I refresh the page i get see scrollbar.
You can change the setting in the preferences. By default, the scroll bar is hidden with mac products.
Odds are if a user is using a Mac, they're already aware of this and it's considered a feature to them.
But, if you really need it, try using the webkit css pseudo selector ::-webkit-scrollbar
This will only work in Safari and Chrome.
I'm working on a web application that was not built with responsive design, so the mobile experience is not very good for users. Nonetheless, users still use the site on mobile devices. When a particular page in the app is rendered on a mobile device, a vertical scroll bar appears, which seems to be totally normal (viewing the same page in a desktop browser also has a vertical scroll bar). The issue is that when the user on the mobile device tries to scroll to the bottom to press the submit button, the page jumps back to the very top. More specifically, the user touches and drags the screen so that the bottom of the page comes into view, and as soon as they lift their finger from the screen, the page jumps back to the top, preventing them from being able to press the submit button because it becomes hidden from view. I've hooked up my iPhone 5s to my Mac and used Desktop Safari to set up remote debugging. That hasn't helped much yet. I noticed that changing the device orientation makes the issue go away. More specifically, the issue happens in both portrait and landscape orientation. However, if you load the page in one orientation and then switch to the other orientation, the issue seems to go away. I also noticed that setting an explicit height on one of the container divs in the CSS seems to fix the issue, despite the CSS rule being ultimately overridden by the browser (I think). When I set the height, though, the page renders a little differently because the content seems more zoomed out and no vertical scroll bar appears.
I've searched around the web for a while and have not found anything useful. I found two SO posts about similar issues, and one had no answer and the other had a junk answer that should've been a comment.
Basically what I'm looking for is for someone that has some amount of experience developing for the mobile web to give me some possible avenues to travel down to solve this thing the right way. I don't want a hacky solution and I'm not necessarily looking for you to tell me what code to write. I just want to get to the bottom of what would cause the page to jerk like that.
Thanks in advance :)
As of 2014-10-22, the header part of a core-scroll-header-panel widget is drawn over the top of the browser's scrollbar. This is deeply suboptimal, as it can make the thumb completely inaccessible until you scroll down. (And first you have to notice there's a scroll bar.)
The standard Polymer demo for the widget demonstrates this:
https://www.polymer-project.org/components/core-scroll-header-panel/demo.html
This happens in both Chrome and Firefox.
Does anyone know of a workaround?
Safari on iOS 7 is exhibiting a bug with a fixed header Nav where the click targets don't seem to map correctly to where the elements are painted.
Demo
Steps to reproduce:
Scroll the page until Safari's address bar shrinks and bottom toolbar disappears.
Tap a button on the bottom row (for example the 'z' button).
This should cause the address bar to expand and the bottom toolbar to reappear.
Notice also that the button click does not trigger.
Now try to tap a button in the top row (for example the '1' button).
A button lower than where the tap occurs will activate.
Some ideas I've had for a workaround would require...
An event that is triggered when the Safari UI state changes. I haven't seen resize or scroll trigger. Is there a mobile safari specific one I may be missing?
An event that I can trigger that toggles this UI state.
Have you tried adding -webkit-backface-visibility: hidden; to your header buttons?
If that works, it's probably due to layer promotion in WebKit. I can add additional info/links if it does.