I have noticed a very strange behavior with text inputs on mobile webkit (mobile safari/android stock browser/chrome)
When an input is inside a div (or any container) that is transformed (has -webkit-transform: translate3d(-100%, 0px, 0px); for example), when the input is filled with text, the visible area is no longer adjusted to follow the cursor.
Please see a demo at http://jsbin.com/itodip/2/
This is only reproducible in mobile browsers!
The only workaround I have found when working with translated divs was to remove the transform on transitionEnd, but this is not ideal.
Any suggestions and possible workarounds?
I've encountered this bug before and I did find a workaround. What I did was set the css "left" property to a high negative number, and then I used the "-webkit-transform" property to move it back to be visible on the screen. For some reason that fixes it.
left: -2000px;
-webkit-transform: matrix(1, 0, 0, 1, 2000, 0);
Here's a link to the stack overflow post I did on it: Scaling input boxes with -webkit-transform
Related
The main div is 600 pixels wide. By my understanding, an iPhone 5 is 640 pixels wide. But when I pull the website up on the iPhone 5, the main div only takes up a small fraction of the screen, maybe a third. Why is that?
Website
So I've seen IOS shrink content so that the whole page is displayed on the phone screen when using css transforms.
So the offending css was
background: url('/images/mobile-device-down-arrow.gif') no-repeat center;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg) scale(1);
we replaced it with
background: url('/images/mobile-device-up-arrow.gif') no-repeat center;
and it fixed the problem.
I remember a bug in webkit for this, but I can't find it right now.
This just happened to me and I managed to fix the issue by wrapping the affected elements that were being shrunk in a div that defined the exact width that the element needed to be, in my case this was: width: calc(100vw - 2rem);
Hopefully this helps anybody having this issue, it seems to only occur on mobile devices when using the rotate transform with transition at any positive degree as when removing the transform, the element reverted to 0deg without shrinking.
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
http://cardiffhosp.rapdevs.co.uk/ has been built around the WooTheme Canvas, which is a responsive design.
I've had to disable the viewport meta tag, because I don't want the layout to be responsive.
It now looks much better on mobile devices, but a white area is appearing to the right hand side. Mostly visible on iPhone/iPad, but zooming out on other devices shows the white space is there.
Adding the following code, solved my problem, but caused the navigation to stop working on iPhones and caused display issues on a Windows 7 phone...
html, body {
overflow-x:hidden;
}
Has anyone got a better solution for removing the white space?
You can try adding width:100% and see if that solves the issue the overflow is causing, IE:
html, body {
overflow-x:hidden;
width:100%;
/* You may also want to try adding:*/
margin: 0;
padding: 0;
}
If that still causes problems then you will need to find the element that is causing the issue.
Couple ways to do this. (Be sure to remove overflow-x:hidden; before starting.)
1) Open the inspector, start with the divs or elements that contains other elements. Set those divs to display:none. If the excess white space disappears then you can find the offending element and fix its CSS.
If that option is too time consuming or you have trouble doing it, you can try another option:
2) This site has some CSS which outlines all of the elements on your site. This can help you find what is causing the overflow. The CSS used on this site is:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
They also provide a javascript bookmark that helps with this as well.
I found a wired issue in Mobile Safari as demo http://mocheng.github.com/demo/translate3d.html
There is one page translate3d_iframe.html inside translate.html as iframe. Elements in translate3d_iframe.html has style -webkit-transform: translate3d(0, 0, 0) to force 3d acceleration.
The interesting result is that the 3D-ed element would always displayed on top of other elements event it has lower z-index.
What is more interesting: the 3D-ed element is just displayed to be on top of other elements. You can still tap on the menu item "hidden by" 3D-ed element (alert message is shown on tap).
This can only be reproduced in Mobile Safari.
Is there anyway to workaround it? I just felt that web developers have to know how iOS browser works to attack such type of issues.
I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?
I took your demo: http://jsfiddle.net/DnGvF/
and added just this CSS at the end: http://jsfiddle.net/gRF9g/
/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
overflow: visible;
*height: 24px;
*line-height: 15px
}
Some explanation of what's going on there:
There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.
It now looks consistent between IE7 and the later versions.
Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.
Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:
*+html .button { line-height:24px }
If you use something like Modernizr, you could do away with the hack and use:
.ie7 .button { line-height:24px }
Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.
EDIT: Forgot about this method of targeting just IE7:
<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.